Z bootstrap (testowany z wersją 2) wymyśliłem następujący kod:

$("a[rel=popover]")
            .popover({
                offset: 10,
                trigger: 'manual',
                animate: false,
                html: true,
                placement: 'left',
                template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

            }).click(function(e) {
                e.preventDefault() ;
            }).mouseenter(function(e) {
                $(this).popover('show');
            });

Głównym celem jest nadpisanie szablonu za pomocą aktywatora mouseleave (). Mam nadzieję, że to pomoże.

Aby dodać do przykładu Marchello, jeśli chcesz, aby popover zniknął, jeśli użytkownik przesunie mysz od linku źródłowego i, wypróbuj to.

var timeoutObj;
$('.nav_item a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var ref = $(this);
    timeoutObj = setTimeout(function(){
        ref.popover('hide');
    }, 50);
});

Bootstrap 3 i wyżej

Proste, wystarczy użyć opcji container i mieć ją jako element wywołujący popover. W ten sposób popover jest potomkiem elementu, który go nazywa. W związku z tym technicznie nadal unosisz się nad rodzicem, ponieważ popover dziecka należy do niego.

Na przykład:

HTML:

<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>

JQuery:

Uruchamianie pętli $.each() nad każdym z moich elementów, które chcę, aby popover był powiązany z jego rodzicem. W tym case, każdy element ma klasę pop.

$('.pop').each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $elem
    });
});

CSS:

Ta część jest opcjonalna, ale zalecana. Przesuwa wyskakujące okienko w dół o 7 pikseli dla Łatwiejszego Dostępu.

.pop .popover {
    margin-top:7px;
}

DEMO ROBOCZE

To jest trochę hakerskie, ale bazując na przykładzie marchello, zrobiłem to (nie ma potrzeby stosowania szablonu):

$(".trigger-link").popover({
  trigger: "manual",
}).on("click", function(e) {
  e.preventDefault();
}).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);
});

setTimeout pomaga zapewnić, że jest czas, aby podróżować od łącza spustowego do wyskakującego.

Ten problem w Bootstrap github rozwiązuje repo. fat wskazał eksperymentalne umieszczenie" w górnej/dolnej/lewej/prawej". Działa całkiem dobrze, ale musisz się upewnić, że wyzwalacz popover nie jest ustawiony statycznie za pomocą css. W przeciwnym razie popover nie pojawi się tam, gdzie chcesz.

HTML:

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>

CSS:

/*CSS */
.myClass{ position: relative;}

JS:

$(function(){
  $('.myClass').popover({placement: 'in top'});
});  

Oto moje zdanie: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Czasami przesuwając mysz z wyskakującego wyzwalacza do rzeczywistej zawartości wyskakującego po przekątnej, najeżdżasz na elementy poniżej. Chciałem poradzić sobie z takimi sytuacjami – tak długo, jak dotrzesz do zawartości popover przed uruchomieniem timeoutu, jesteś zapisany (popover nie zniknie). Wymaga opcji delay.

Ten hack zasadniczo nadpisuje funkcję Popover leave, ale wywołuje oryginał (który uruchamia timer aby ukryć wyskakujące okienko). Następnie dołącza jednorazowy słuchacz do elementu mouseenter popover content ' s.

Jeśli mysz wpisze wyskakujące okienko, timer zostanie wyczyszczony. Następnie włącza on nasłuchiwanie mouseleave przy popover i jeśli zostanie uruchomiony, wywoła oryginalną funkcję leave, aby móc uruchomić czas ukrywania.

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);
      });
    })
  }
};

Rozwiązanie zadziałało dla Bootstrap 3.

var timeoutObj;
$('.list-group a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var _this = this;
    setTimeout(function() {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100);
}); 

W końcu rozwiązuję ten problem. Popover disappear jest ponieważ Popover nie węzeł potomny łącza, jest węzłem potomnym ciała.

Więc napraw to jest łatwe, Zmień bootstrap-twipsy.js treść:

Zmień .prependTo(document.body) na .prependTo(this.$element)

I naprawić problem pozycji przez zmianę.

A niektórzy używają linku tiger popover spowoduje popover z linkiem też, więc dodaj span zawierać link, więc problem rozwiązany.

Jest to wersja rozwiązania Wojtka Kruszewskiego. Ta wersja obsługuje wyskakujące miganie, gdy mysz wraca do wyzwalacza. http://jsfiddle.net/danielgatis/QtcpD/

(function($) {
      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) {
          var current = $(obj.currentTarget);
          var container = current.siblings(".popover");
          container.on("mouseenter", function() {
            clearTimeout(self.timeout);
          });
          container.on("mouseleave", function() {
            originalLeave.call(self, self);
          });
        }
      };

      var originalEnter = $.fn.popover.Constructor.prototype.enter;
      $.fn.popover.Constructor.prototype.enter = function(obj) {
        var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
        clearTimeout(self.timeout);
        if (!$(obj.currentTarget).siblings(".popover:visible").length) {
          originalEnter.call(this, obj);
        }
      };
    })(jQuery);

Próbowałem rozwiązań z @Wotjek Kruszewski i @danielgatis, ale żadne z nich nie zadziałało. Uwaga: używam Bootstrap v2.1. 0, nie v3. To rozwiązanie jest w coffeescript (dlaczego ludzie nadal używają zwykłego javascript? =)).

(($) ->
  originalLeave = $.fn.popover.Constructor::leave
  $.fn.popover.Constructor::leave = (e) ->
    self = $(e.currentTarget)[@type](@_options).data(@type)
    originalLeave.call @, e

    if e.currentTarget
      container = $(".popover")
      container.one "mouseenter", ->
        clearTimeout self.timeout

        container.one "mouseleave", ->
          originalLeave.call self, e
) jQuery

Oto co zrobiłem:

e = $("a[rel=popover]")
e.popover({
    content: d, 
    html:true, 
    trigger:'hover',
    delay: {hide: 500},
    placement: 'bottom',
    container: e, 
})

Jest to bardzo proste i awesone rozwiązanie tego probelma, które odkryłem, patrząc na kod podpowiedzi bootstrap. W Bootstrap v3. 0. 3 Oto linia kodu, którą zauważyłem:

this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)

To mówi, że jeśli container właściwość popover jest zdefiniowana, to popover otrzymuje appendTo() element zamiast insertAfter () element oryginalny, wszystko, co musisz zrobić, to przekazać element jako właściwość kontenera. Z powodu appendTo () popover staje się część łącza, na którym zdarzenie hover zostało powiązane, a tym samym utrzymuje wyskakujące okno, gdy porusza się po nim mysz.

To działa dla mnie na BootStrap 3:

el.popover({
  delay: {hide: 100}
}).on("shown.bs.popover", function(){
  el.data("bs.popover").tip().off("mouseleave").on("mouseleave", function(){
    setTimeout(function(){
      el.popover("hide");
    }, 100);
  });
}).on("hide.bs.popover", function(ev){
  if(el.data("bs.popover").tip().is(":hover"))
    ev.preventDefault();
});

Na końcu rozmowy podlinkowany przez @ stevendaniels znajduje się link do rozszerzenia Twitter Bootstrap o nazwie BootstrapX - clickover autorstwa Lee Carmichael. Zmienia to wyskakujące okienko z nakładającej się podpowiedzi na interaktywną kontrolkę, którą można zamknąć, klikając w innym miejscu formularza, przycisk zamykania lub po przekroczeniu limitu czasu. Jest łatwy w użyciu i działał bardzo dobrze w projekcie, w którym go potrzebowałem. Niektóre przykłady jego użycia można znaleźć tutaj.

Nie spodobała mi się żadna z odpowiedzi, które znalazłem, więc połączyłem kilka odpowiedzi, które były bliskie, aby utworzyć następujący kod. Pozwala to na wpisanie $(selector).pinnablepopover(options); za każdym razem, gdy chcesz zrobić wyskakujące okienko "przypięte".

Kod, który ułatwia sprawy:

$.fn.popoverHoverShow = function ()
{
    if(this.data('state') !== 'pinned')
    {
        if(!this.data('bs.popover').$tip || (this.data('bs.popover').$tip && this.data('bs.popover').$tip.is(':hidden')))
        {
            this.popover('show');
        }
    }
};
$.fn.popoverHoverHide = function ()
{
    if (this.data('state') !== 'pinned')
    {
        var ref = this;
        this.data('bs.popover').$tip.data('timeout', setTimeout(function(){ ref.popover('hide') }, 100))
        .on('mouseenter', function(){ clearTimeout($(this).data('timeout')) })
        .on('mouseleave', function(){ $(this).data('timeout', setTimeout(function(){ ref.popover('hide') }, 100)) });
        this.on('mouseenter', function(){ clearTimeout($(this).data('timeout')) });
    }
};
$.fn.popoverClickToggle = function ()
{
    if (this.data('state') !== 'pinned')
    {
        this.data('state', 'pinned');
    }
    else
    {
        this.data('state', 'hover')
    }
};
$.fn.pinnablepopover = function (options)
{
    options.trigger = manual;
    this.popover(options)
    .on('mouseenter', function(){ $(this).popoverHoverShow() })
    .on('mouseleave', function(){ $(this).popoverHoverHide() })
    .on('click', function(){ $(this).popoverClickToggle() });
};

Przykładowe użycie:

$('[data-toggle=popover]').pinnablepopover({html: true, container: 'body'});

Po obejrzeniu wszystkich odpowiedzi, które zrobiłem, myślę, że to będzie pomocne .Możesz zarządzać wszystkim, czego potrzebujesz. Wiele odpowiedzi nie powoduje opóźnienia pokazu używam tego. Jego praca jest bardzo przyjemna w moim projekcie
/****** /*************************************************************/

<div class='thumbnail' data-original-title=''  style='width:50%'>    
 <div id='item_details' class='popper-content hide'>
    <div>
        <div style='height:10px'> </div>
        <div class='title'>Bad blood </div>
        <div class='catagory'>Music </div>
    </div>

  </div>
  HELLO POPOVER
</div>"

/****************KOD SKRYPTU ****************** PROSZĘ UŻYWAĆ Z HEAR ******/

$(".thumbnail").popover({
trigger: "manual" ,
html: true,
animation:true,
container: 'body',
placement: 'auto right',
content: function () {
    return $(this).children('.popper-content').html();
}}) .on("mouseenter", function () {
var _this = this;

$('.thumbnail').each(function () {
    $(this).popover('hide');
});
setTimeout(function(){
    if ($(_this).is(':hover')) {
        $(_this).popover("show");
    }
},1000);
$(".popover").on("mouseleave", function () {
    $('.thumbnail').each(function () {
        $(this).popover('hide');
    });
    $(_this).popover('hide');
 }); }).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100); });