Как я могу держать Twitter Bootstrap Popover открытым до тех пор, пока в него не войдет моя мышь?

Question

У меня есть ссылка, которая использует Twitter Bootstrap Popover версии 1.3.0 , чтобы показать некоторую информацию.Эта информация включает в себя ссылку, но каждый раз, когда я перемещаю свою мышь от ссылки к поповеру, поповер просто исчезает.

Как я могу держать поповер открытым, чтобы мышь могла двигаться в нем?Затем, когда мышь выходит из ссылки и всплывающего окна, прячется?

Или есть какой-то другой плагин, который может это сделать?

Answer 1

Это версия решения Войтека Крушевского.В этой версии всплывающее окно мигает, когда мышь возвращается к срабатыванию.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);

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

Код, облегчающий задачу:

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

Answer 6

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