Outra solução:
$target.find('.myPopOver').mouseenter(function()
{
if($(this).data('popover') == null)
{
$(this).popover({
animation: false,
placement: 'right',
trigger: 'manual',
title: 'My Dynamic PopOver',
html : true,
template: $('#popoverTemplate').clone().attr('id','').html()
});
}
$(this).popover('show');
$.ajax({
type: HTTP_GET,
url: "/myURL"
success: function(data)
{
$('.popover.in .popover-inner').empty();
$('.popover.in .popover-inner').html(data);
}
});
});
$target.find('.myPopOver').mouseleave(function()
{
$(this).popover('hide');
});
A idéia aqui é para acionar manualmente a exibição de Popover com mouseenter e MouseLeave eventos.
No mouseenter , se não houver PopOver criado para o seu item ( if ($ (this) .data ('popover') == null) ), crie-o. O que é interessante é que você pode definir seu próprio conteúdo PopOver, passando-o como argumento ( modelo ) para a função popover () . Não se esqueça de definir o parâmetro html como verdadeiro também.
Aqui, acabei de criar um modelo oculto chamado popovertemplate e cloná-lo com JQuery. Não se esqueça de excluir o atributo id depois de cloná-lo, caso contrário, você acabará com ids duplicados no DOM. Observe também que style = "display: none" para ocultar o modelo na página.
<div id="popoverTemplateContainer" style="display: none">
<div id="popoverTemplate">
<div class="popover" >
<div class="arrow"></div>
<div class="popover-inner">
//Custom data here
</div>
</div>
</div>
</div>
Após a etapa de criação (ou se já tiver sido criada), você apenas exibe o popOver com $ (this) .popover ('show');
Em seguida, chamada de Ajax clássico. Em caso de sucesso, você precisa limpar o conteúdo antigo do popover antes de colocar novos dados novos do servidor . Como podemos obter o conteúdo popover atual? Com o seletor .popover.in ! A classe .in indica que o popover está sendo exibido no momento, esse é o truque aqui!
Para finalizar, no evento mouseleave , basta ocultar o popover.