Estrutura de repetição para itens de um popOver

To trabalhando num popover para mostra um texto grande que não ficaria bom em um item de uma lista

só que preciso repetir as clausulas dele pra que existam várias classes o script

@foreach (var item in Model)
{

 <script type="text/javascript">
 $(document).ready(function () {
 $('#@Html.DisplayFor(modelItem => item.Id)').popover({
 html: true,
 placement: 'top',
 title: 'Full URL <a class="close" href="#");">×</a>',
 content: '<div class="msg"><p class="text"> @Html.DisplayFor(modelItem => item.Url) <p></div>',
 });

 $('#@Html.DisplayFor(modelItem => item.Id)').click(function (e) {
 e.stopPropagation();
 });

 $(document).click(function (e) {
 if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
 $('#@Html.DisplayFor(modelItem => item.Id)').popover('hide');
 }
 });

 });

 </script>
}

Então, sei que poder ser por causa do " $(document).ready" mas se colocar dentro do código o for each não funciona, alguém tem alguma idéia ?

Segui mais ou menos o que faz o bootstrap

http://getbootstrap.com/javascript/#popovers

Só que não funciona, debuguei mas ele não aparece o popover

Chamo pela seguinte tag:

button id="@Html.DisplayFor(modelItem => item.Id)" class="popoverThis btn btn-sm btn-default">FullURL</button>