Estrutura de repetição para itens de um popOver

[Rodolfo TI 6]

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>

[KhaosDoctor 242]

O Popover tem um estilo dinâmico que funciona assim, ele se aplica automaticamente quando encontra um elemento com a classe marcada.

 

Por exemplo, se você tiver um elemento com "rel='popover'", vou mandar a documentação e você pode dar uma olhada.

 

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

 

Preste atenção na propriedade selector. Este abaixo é o exemplo prático que ele dá:

 

http://jsfiddle.net/fScua/

 

Basicamente o que você precisa é colocar todos os elemento que vão receber o popover, digamos uma <td>, com o atributo de sua escolha.

[Rodolfo TI 6]

O Popover tem um estilo dinâmico que funciona assim, ele se aplica automaticamente quando encontra um elemento com a classe marcada.

 

Por exemplo, se você tiver um elemento com "rel='popover'", vou mandar a documentação e você pode dar uma olhada.

 

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

 

Preste atenção na propriedade selector. Este abaixo é o exemplo prático que ele dá:

 

http://jsfiddle.net/fScua/

 

Basicamente o que você precisa é colocar todos os elemento que vão receber o popover, digamos uma <td>, com o atributo de sua escolha.

Excelente resposta, eu estava usando uma classe separada para o popover, praticamente reinventando a roda, foi uma melhor decisão usar o do bootstrap, obrigado pela dica.