Como posso manter os popovers do Bootstrap vivos enquanto estou passando o mouse?

114

Estou usando um popover de Bootstrap para criar um cartão de foco que mostra informações do usuário e o estou acionando ao passar o mouse sobre um botão. Desejo manter este popover ativo enquanto o próprio popover está sendo passado, mas ele desaparece assim que o usuário pára de passar o mouse sobre o botão. Como posso fazer isso?

$('#example').popover({
    html : true,
    trigger : 'manual',
    content : function() {
        return '<div class="box">Popover</div>';
    }
});

$(document).on('mouseover', '#example', function(){
    $('#example').popover('show');
});

$(document).on('mouseleave', '#example', function(){
    $('#example').popover('hide');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

Expandir trecho

jquery twitter-bootstrap popper.js

— vikas devde
fonte

você quer manter o que vivo? Passei o mouse sobre o botão e ele permaneceu aberto?

— David Chase

leia a última linha da pergunta

— vikas devde

172

Teste com o snippet de código abaixo:

Pequena modificação (da solução fornecida por vikas) para se adequar ao meu caso de uso.

Abrir popover no evento de foco para o botão popover
Mantenha o popover aberto ao passar o mouse sobre a caixa popover
Fechar o popover no mouse para o botão popover ou a caixa popover.

$(".pop").popover({
    trigger: "manual",
    html: true,
    animation: false
  })
  .on("mouseenter", function() {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
  });

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
  <p class='text-muted'>KISS = Keep It Simple S....</p>

  <p class='text-primary'>Goal:</p>
  <ul>
    <li>Open popover on hover event for the popover button</li>
    <li>Keep popover open when hovering over the popover box</li>
    <li>Close popover on mouseleave for either the popover button, or the popover box.</li>
  </ul>

  <button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME
    </button>
  <br><br>
  <button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME... Again!
    </button><br><br>
  <button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    Okay one more time... !
    </button>
  <br><br>
  <p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
  <script src="script.js"></script>
</body>

</html>

Expandir trecho

— OkezieE
fonte

Isso funciona perfeitamente, eu percebi que faltava um ;segundo em você $(_this).popover("hide"). Mas obrigado, era tão simples e limpo!

— bode expiatório

3

Essa resposta é incrível. Funciona muito bem no BS3 a partir de maio de 2015 ^^

— degenerou

1

Usei-o em uma tabela e acrescentei container: 'body'as opções porque fazia as células mudarem. Ótima resposta!

— Alexander Derck

O popover fica oculto se você acessá-lo e depois voltar ao elemento acionador antes de 300 ms. Para corrigi-lo, verifique se AMBOS o popover e seu gatilho são: passe o mouse antes de ocultá-lo em setTimeout. Eu também usaria setTimeout e a mesma abordagem no mouse e deixe o popover em si, para corrigir a cintilação.

— rzb

Certifique-se de definir animation:falsepara corrigir a cintilação - verifique no link do Plunker que tenho acima. Funciona perfeitamente para mim.

— OkezieE,

84

Eu vim atrás de outra solução para isso ... aqui está o código

    $('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

— vikas devde
fonte

6

É importante adicionar, animation: falsecaso contrário, mover o mouse sobre o link repetidamente fará com que ele não funcione corretamente

— jasop

5

Tenho uma pequena modificação em seu código @vikas ( gist.github.com/Nitrodist/7913848 ). Ele verifica novamente a condição após 50ms para que não fique preso aberto. Ou seja, ele verifica continuamente a cada 50ms.

— Nitrodista

2

Como isso pode ser adaptado para funcionar em elementos dinâmicos recém-adicionados ao documento?

— williamsowen

28

Aqui está minha opinião: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Às vezes, ao mover o mouse do gatilho popover para o conteúdo popover real na diagonal , você passa o mouse sobre os elementos abaixo. Eu queria lidar com essas situações - contanto que você alcance o conteúdo do popover antes que o tempo limite seja acionado, você estará seguro (o popover não desaparecerá). Requer delayopção.

Este hack basicamente substitui a leavefunção Popover , mas chama o original (que inicia o cronômetro para ocultar o popover). Em seguida, ele anexa um ouvinte único ao mouseenterelemento de conteúdo popover.

Se o mouse entrar no popover, o cronômetro será zerado. Em seguida, ele escuta o mouseleavepopover e, se for acionado, chama a função de licença original para iniciar o temporizador de ocultação.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

— Wojtek Kruszewski
fonte

5

Encontrar o contêiner pode ser melhorado usando. container = self.$tip;Desta forma, o popover pode até ser encontrado quando a containerpropriedade é definida. Há um violino aqui: jsfiddle.net/dennis_c/xJc65

— dbroeks

3

@pferrel eu resolvi esse problema no fork do violino de @Wojtek_Kruszewski: jsfiddle.net/HugeHugh/pN26d veja a parte que verifica if (!thisTip.is(':visible'))antes de chamar ooriginalShow()

— H Dog

1

Se o popover for inicializado com a opção, container: 'body',esta solução não funcionará conforme o esperado. A variável containerprecisa ser substituída por self.$tip. Verifique minha resposta para mais detalhes: stackoverflow.com/a/28731847/439427

— Rubens Mariuzzo

1

Brilhante. Isso funciona para quando usar o parâmetro 'selector', ao contrário das outras respostas.

— jetlej

1

Aqui está uma versão melhorada que corrige um bug ao sair e reinserir a ponta ainda escondida, e também corrige o cenário quando a ponta é anexada ao corpo jsfiddle.net/Zf3m7/1499

— Zoltán Tamási

14

Acho que uma maneira fácil seria esta:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

Dessa forma, o popover é criado dentro do próprio elemento de destino. então, quando você move o mouse sobre o popover, ele ainda está sobre o elemento. O Bootstrap 3.3.2 funciona bem com isso. A versão mais antiga pode ter alguns problemas com animação, então você pode querer desativar "animação: falso"

— Cu Lý
fonte

Eu sei que este tópico é antigo, mas esta é a solução melhor e mais limpa na minha opinião e deve ser classificada em posição superior. A única ressalva é que isso iria quebrar, se você posicionar o popover (de uma forma estranha) "longe" do elemento acionador. Mas, desde que a distância entre os dois seja zero (por exemplo, eles se sobrepõem), isso funciona perfeitamente e não requer nenhum JS personalizado. Obrigado!

— JohnGalt

Essa é a solução melhor, mais limpa e mais fácil até agora. Deve ser classificado mais alto! Eu adicionei delay: { "hide": 400 }para adicionar algum atraso antes de ocultar e funciona muito bem! 👍

— coorasse

14

Usei o conjunto de gatilhos para hovere dei o conjunto de contêineres para #elemente, finalmente, adicionei um posicionamento de boxpara right.

Esta deve ser sua configuração:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});

e #examplecss precisa position:relative;verificar o jsfiddle abaixo:

https://jsfiddle.net/9qn6pw4p/1/

Editado

Este violino tem ambos os links que funcionam sem problemas http://jsfiddle.net/davidchase03/FQE57/4/

— David Chase
fonte

hmm isso funciona, posso usar jquery ajax em contentopção, para obter o conteúdo do lado do servidor ... funcionará ou eu preciso fazer algum trabalho extra para isso

— vikas devde

@vikasdevde sim, você pode usar ajaxno conteúdo, mas você precisa configurar para que funcione ... por favor, marque a resposta correta se isso resolveu seu OP.. para que outros possam se beneficiar

— David Chase

mas se usarmos o próprio link como um contêiner, todo o popover se tornará um link ... experimente

— vikas devde

se você colocar um link dentro da caixa, ele continuará com um link para fora .. correto?

— David Chase

2

Nenhum dos trabalhos do jsfiddle para mim. Chrome 20 de março de 2014.

— pferrel

7

Foi assim que fiz com o bootstrap popover com ajuda de outros bits da rede. Obtém dinamicamente o título e o conteúdo dos vários produtos exibidos no site. Cada produto ou popover recebe uma identificação exclusiva. O popover desaparecerá ao sair do produto ($ this .pop) ou do popover. O tempo limite é usado onde exibirá o popover até sair pelo produto em vez do popover.

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

— Hoektoe
fonte

Isso também funcionará se o popover não for filho do elemento de destino. +1

— Taha Paksu,

6

Aqui está uma solução que desenvolvi que parece funcionar bem, ao mesmo tempo que permite que você use a implementação normal do Bootstrap para ativar todos os popovers.

Violino original: https://jsfiddle.net/eXpressive/hfear592/

Transferido para esta pergunta:

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});

— eXpressiveDesign
fonte

2

Concordo que a melhor maneira é usar aquele fornecido por: David Chase , Cu Ly e outros que a maneira mais simples de fazer isso é usar a container: $(this)propriedade da seguinte maneira:

$(selectorString).each(
  var $this = $(this);
  $this.popover({
    html: true,
    placement: "top",
    container: $this,
    trigger: "hover",
    title: "Popover",
    content: "Hey, you hovered on element"
  });
);

Quero salientar aqui que o popover, neste caso, herdará todas as propriedades do elemento atual . Então, por exemplo, se você fizer isso para um .btnelemento (bootstrap), você não poderá selecionar o texto dentro do popover . Só queria registrar isso, já que passei um bom tempo batendo minha cabeça nisso.

— forumulator
fonte

1

A resposta do Vikas funciona perfeitamente para mim, aqui também adiciono suporte para o atraso (mostrar / ocultar).

var popover = $('#example');
var options = {
    animation : true,
    html: true,
    trigger: 'manual',
    placement: 'right',
    delay: {show: 500, hide: 100}
};   
popover
    .popover(options)
    .on("mouseenter", function () {

        var t = this;
        var popover = $(this);    
        setTimeout(function () {

            if (popover.is(":hover")) {

                popover.popover("show");
                popover.siblings(".popover").on("mouseleave", function () {
                    $(t).popover('hide');
                });
            }
        }, options.delay.show);
    })
    .on("mouseleave", function () {
        var t = this;
        var popover = $(this);

        setTimeout(function () {
            if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {
                $(t).popover("hide")
            }
        }, options.delay.hide);
    });

Também preste atenção, eu mudei:

if (!$(".popover:hover").length) {

com:

if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {

para que faça referência exatamente àquele popover aberto, e não a qualquer outro (já que agora, por meio do atraso, mais de 1 pode ser aberto ao mesmo tempo)

— user1993198
fonte

O comentário que fiz no final não está certo ao usar o container: body, se for o caso, ainda tenho que usar a solução do Vikas para aquela linha

— user1993198

1

A resposta escolhida funciona, mas falhará se o popover for inicializado com o bodycomo o contêiner.

$('a').popover({ container: 'body' });

Uma solução baseada na resposta escolhida é o seguinte código que precisa ser colocado antes de usar o popover.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

A mudança é mínima usando em self.$tipvez de percorrer o DOM esperando que o popover seja sempre um irmão do elemento.

— Rubens Mariuzzo
fonte

0

Mesma coisa para dicas de ferramentas:

Para mim, a solução a seguir funciona porque não adiciona ouvintes de evento em cada 'mouseenter' e é possível voltar ao elemento de dica de ferramenta que mantém a dica de ferramenta viva.

$ ->

  $('.element').tooltip({
    html: true,
    trigger: 'manual'
  }).
  on 'mouseenter', ->
    clearTimeout window.tooltipTimeout
    $(this).tooltip('show') unless $('.tooltip:visible').length > 0
  .
  on 'mouseleave', ->
    _this = this
    window.tooltipTimeout = setTimeout ->
      $(_this).tooltip('hide')
    , 100

$(document).on 'mouseenter', '.tooltip', ->
  clearTimeout window.tooltipTimeout

$(document).on 'mouseleave', '.tooltip', ->
  trigger = $($(this).siblings('.element')[0])
  window.tooltipTimeout = setTimeout ->
    trigger.tooltip('hide')
  , 100

— phlppn
fonte

0

Esta solução funcionou bem para mim: (agora é à prova de balas) ;-)

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(this).is(':hover'))
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

— Johannes Ferner
fonte

0

        $(function() {
            $("[data-toggle = 'popover']").popover({
                placement: 'left',
                html: true,
                trigger: "  focus",
            }).on("mouseenter", function() {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function() {
                    $(_this).popover('hide');
                });
            }).on("mouseleave", function() {
                var _this = this;
                setTimeout(function() {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide")
                    }
                }, 100);
            });
        });

— Dinesh Sarak
fonte

0

Descobri que o mouseleavenão dispara quando coisas estranhas acontecem, como o foco da janela muda repentinamente e o usuário volta ao navegador. Em casos como esse,mouseleave nunca será disparado até que o cursor passe e deixe o elemento novamente.

Esta solução que criei depende mouseenterdo windowobjeto, então ele desaparece quando o mouse é movido para qualquer outro lugar na página.

Isso foi projetado para funcionar com vários elementos na página que irão acioná-lo (como em uma tabela).

var allMenus = $(".menus");
allMenus.popover({
    html: true,
    trigger: "manual",
    placement: "bottom",
    content: $("#menuContent")[0].outerHTML
}).on("mouseenter", (e) => {
    allMenus.not(e.target).popover("hide");
    $(e.target).popover("show");
    e.stopPropagation();
}).on("shown.bs.popover", () => {
    $(window).on("mouseenter.hidepopover", (e) => {
        if ($(e.target).parents(".popover").length === 0) {
            allMenus.popover("hide");
            $(window).off("mouseenter.hidepopover");
        }
    });
});

— Gabriel luci
fonte

0

Será mais flexível com hover():

$(".my-popover").hover(
    function() {  // mouse in event
        $this = $(this);
        $this.popover({
            html: true,
            content: "Your content",
            trigger: "manual",
            animation: false
            });
        $this.popover("show");
        $(".popover").on("mouseleave", function() {
            $this.popover("hide");
        });
    },
    function() {  // mouse out event
        setTimeout(function() {
            if (!$(".popover:hover").length) {
                $this.popover("hide");
            }
        }, 100);
    } 
)

— Gray Li
fonte

0

Simples :)

$('[data-toggle="popover"]').popover( { "container":"body", "trigger":"focus", "html":true });
$('[data-toggle="popover"]').mouseenter(function(){
    $(this).trigger('focus');
});

— edmc73
fonte

0

Recentemente, precisei fazer isso funcionar com KO e as soluções acima não funcionaram bem quando houve um atraso no show e hide. A seguir deve corrigir isso. Com base em como as dicas de ferramentas de bootstrap funcionam. Espero que isso ajude alguém.

var options = {
                delay: { show: 1000, hide: 50 },
                trigger: 'manual',                      
                html: true
            };
var $popover = $(element).popover(options);

$popover.on('mouseenter', function () { // This is entering the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'in';

    self.timeout = setTimeout(function () {
        if (self.hoverState == 'in') {
            $(self).popover("show");

            $(".popover, .popover *").on('mouseover', function () { // This is moving over the popover
                clearTimeout(self.timeout);
            });                                                                 

            $(".popover").on('mouseleave', function () { // This is leaving the popover
                self.timeout = setTimeout(function () {
                    if (self.hoverState == 'out') {
                        $(self).popover('hide');
                    }
                }, options.delay.hide);
            });
        }
    }, options.delay.show);
}).on('mouseleave', function (event) { // This is leaving the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'out';

    self.timeout = setTimeout(function () {                             
        if (self.hoverState == 'out') {
            $(self).popover('hide');
        }

    }, options.delay.hide);
});

— Zarthost Boman
fonte

-1

Este é o meu código para mostrar dicas de dinâmica com atraso e carregado por ajax.

$(window).on('load', function () {
    generatePopovers();
    
    $.fn.dataTable.tables({ visible: true, api: true }).on('draw.dt', function () {
        generatePopovers();
    });
});

$(document).ajaxStop(function () {
    generatePopovers();
});

Expandir trecho

function generatePopovers() {
var popover = $('a[href*="../Something.aspx"]'); //locate the elements to popover

popover.each(function (index) {
    var poplink = $(this);
    if (poplink.attr("data-toggle") == null) {
        console.log("RENDER POPOVER: " + poplink.attr('href'));
        poplink.attr("data-toggle", "popover");
        poplink.attr("data-html", "true");
        poplink.attr("data-placement", "top");
        poplink.attr("data-content", "Loading...");
        poplink.popover({
            animation: false,
            html: true,
            trigger: 'manual',
            container: 'body',
            placement: 'top'
        }).on("mouseenter", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (thispoplink.is(":hover")) {
                    thispoplink.popover("show");
                    loadDynamicData(thispoplink); //load data by ajax if you want
                    $('body .popover').on("mouseleave", function () {
                        thispoplink.popover('hide');
                    });
                }
            }, 1000);
        }).on("mouseleave", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (!$("body").find(".popover:hover").length) {
                    thispoplink.popover("hide");
                }
            }, 100);
        });
    }
});

Expandir trecho

function loadDynamicData(popover) {
    var params = new Object();
    params.somedata = popover.attr("href").split("somedata=")[1]; //obtain a parameter to send
    params = JSON.stringify(params);
    //check if the content is not seted
    if (popover.attr("data-content") == "Loading...") {
        $.ajax({
            type: "POST",
            url: "../Default.aspx/ObtainData",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (data) {
                console.log(JSON.parse(data.d));
                var dato = JSON.parse(data.d);
                if (dato != null) {
                    popover.attr("data-content",dato.something); // here you can set the data returned
                    if (popover.is(":hover")) {
                        popover.popover("show"); //use this for reload the view
                    }
                }
            },

            failure: function (data) {
                itShowError("- Error AJAX.<br>");
            }
        });
    }
}

Expandir trecho

— Giuliano
fonte