Ответ 1

Теперь я просто переключаюсь на webuiPopover, он просто работает.

Ответ 2

С bootstrap (протестированным с версией 2) я выяснил следующий код:

$("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');
            });

Главное - переопределить шаблон с помощью mouseleave() enabler. Надеюсь, это поможет.

Ответ 3

Просто добавьте пример Marchello, если вы хотите, чтобы popover исчез, если пользователь отталкивает свою мышь от ссылки popover и source, попробуйте это.

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

Ответ 4

Bootstrap 3 и выше

Просто используйте параметр container и используйте его как элемент, вызывающий popover. Таким образом, popover является дочерним элементом элемента, который его вызывает. Следовательно, вы технически все еще нависаете над родителем, потому что дочерний popover принадлежит ему.

Например:

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

Запуск цикла $.each() для каждого из моих элементов, который я хочу, чтобы popover привязывался к его родительскому элементу. В этом случае каждый элемент имеет класс pop.

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

CSS

Эта часть является необязательной, но рекомендуется. Он перемещает popover вниз на 7 пикселей для облегчения доступа.

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

РАБОЧИЙ ДЕМО

Ответ 5

Это немного взломанный, но, основываясь на примере marchello, я сделал это (нет необходимости в шаблоне):

$(".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 помогает обеспечить время для перехода с триггерной ссылки на popover.

Ответ 6

Эта проблема в репозитории bootstrap github связана с этой проблемой. жир указал на экспериментальное размещение "сверху/снизу/слева/справа". Это работает очень хорошо, но вы должны убедиться, что триггер popover не статически статичен с помощью css. В противном случае popover не появится там, где вы хотите.

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

Ответ 7

Здесь мой прием: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Иногда, перемещая мышь из popover trigger в фактический popover контент по диагонали, вы наводите на себя элементы ниже. Я хотел справиться с такими ситуациями - до тех пор, пока вы достигнете содержимого popover до того, как погаснет тайм-аут, вы сохраните (popover не исчезнет). Для этого требуется delay вариант.

Этот хак в основном переопределяет функцию Popover leave, но вызывает оригинал (который запускает таймер, чтобы скрыть popover). Затем он прикрепляет одноразовый слушатель к элементу содержимого mouseenter popover content.

Если мышь входит в popover, таймер очищается. Затем он переключает его на mouseleave на 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)
  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 monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Ответ 8

Решение работало для нас для 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);
}); 

Ответ 9

Наконец, я исправляю эту проблему. Popover исчезает, потому что Popover не дочерний node ссылки, это дочерний элемент node тела.

Так что исправить это легко, измените bootstrap-twipsy.js содержимое:

измените .prependTo(document.body) на .prependTo(this.$element)

и устранить проблему с положением позиции путем изменения.

а некоторые используют ссылку tiger popover, также вызовут popover со ссылкой, поэтому добавьте ссылку на span, чтобы решить проблему.

Ответ 10

Это версия решения Wojtek Kruszewski. Эта рукописная надпись версии мигает, когда мышь возвращается к триггеру. 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);

Ответ 11

Я пробовал решения от @Wotjek Kruszewski и @danielgatis, но ни один из них не работал у меня. Caveat: Я использую Bootstrap v2.1.0, а не v3. Это решение находится в coffeescript (почему люди все еще используют простой 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

Ответ 12

Вот что я сделал:

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

Это очень простое и удобное решение этой проблемы, которое я узнал, просмотрев код всплывающей подсказки. В Bootstrap v3.0.3 вот строка кода, которую я заметил:

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

это говорит о том, что если свойство container свойства popover определено, то popover получает appendTo() элемент вместо insertAfter() исходного элемента, все, что вам нужно сделать, это просто передать элемент как свойство контейнера. Из-за appendTo() popover становится частью ссылки, на которой было привязано событие hover, и таким образом сохраняет popover открытым, когда мышь перемещается по нему.

Ответ 13

Это работает для меня на 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();
});

Ответ 14

В конце разговора, связанного с @stevendaniels, есть ссылка на расширение Bootstrap Twitter, которое называется BootstrapX - clickover Ли Кармайкл. Это изменяет popover из всплывающей подсказки в интерактивный элемент управления, который можно закрыть, щелкнув в другом месте формы, кнопку закрытия или после таймаута. Он прост в использовании и очень хорошо работал для проекта, в котором я нуждался. Некоторые примеры его использования можно найти здесь.

Ответ 15

Мне не понравился ни один из ответов, которые я нашел, поэтому я собрал несколько ответов, которые были близки к составлению следующего кода. Это позволяет вам просто набирать $(selector).pinnablepopover(options); каждый раз, когда вы хотите создать "прыгающий" popover.

Код, который упрощает:

$.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() });
};

Пример использования:

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

Ответ 16

После просмотра всего ответа я сделал это, я думаю, это будет полезно. Вы можете управлять всем, что вам нужно. Многие ответы не делают задержку отображения, я использую это. Его работа очень приятная в моем проекте
/****** /************************************************* ************/

<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>"

/**************** SCRIPT КОД ****************** ПОЖАЛУЙСТА, ИСПОЛЬЗУЙТЕ ИЗ СЕРДЦА **** **/

$(".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); });