How can I keep Twitter Bootstrap Popover open until my mouse enters it?

Question

I have a link that uses Twitter Bootstrap Popover version 1.3.0 to show some information. This information includes a link, but every time I move the mouse from a link to a popover, the popover just disappears.

How can I keep a popover open long enough to allow the mouse to move into it? Then, when the mouse exits the link and fits, hide it?

Or is there another plugin that can do this?

Answer 1

Now I just switch to webuiPopover, it just works.

Answer 2

With bootstrap (tested with version 2), I figured out the following code:

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

The main thing is to override the template with mouseleave () enabler. Hope this helps.

Answer 3

Just add the Marchello example, if you want the popover to disappear, if the user pushes his mouse away from the popover and source links, try this.

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

Answer 4

Bootstrap 3 and higher

Just use the container parameter and use it as the element that calls popover. Thus, a popover is a child of the element that calls it. Therefore, you are technically still hanging over the parent because the child popover belongs to him.

For example:

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

Running the $.each() loop for each of my elements, which I want the popover to bind to its parent element. In this case, each element has a class pop .

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

CSS

This part is optional but recommended. It moves the popover down 7 pixels for easier access.

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

WORKING DEMO

Answer 5

This is a bit hacky, but based on the marchello example, I did this (no template needed):

 $(".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 helps provide time for the transition from trigger links to popover.

Answer 6

This issue in the bootstrap github repository is related to this issue. fat indicated the experimental placement of "top / bottom / left / right." This works very well, but you have to make sure that the popover trigger is not statically static using css. Otherwise, the popover will not appear where you want.

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

Answer 7

Here's my trick: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Sometimes, moving the mouse from the popover trigger to the actual popover content diagonally, you hover over the elements below. I wanted to deal with such situations - until you reach the contents of the popover before the timeout goes off, you save (the popover does not disappear). This requires a delay option.

This hack basically overrides the Popover leave function, but calls the original (which starts a timer to hide the popover). He then attaches a one-time listener to the mouseenter popover content element.

If the mouse enters a popover, the timer is cleared. He then switches it from mouseleave to popover, and if it fires, he calls the original vacation function so that it can start the hide timer.

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

Answer 8

The solution worked for us for 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); }); 

Answer 9

Finally, I fix this problem. Popover disappears because Popover is not a child of a node node, it is a child of a node in the body.

So to fix this easily, change the bootstrap-twipsy.js contents:

change .prependTo(document.body) to .prependTo(this.$element)

and fix the problem with position position by changing.

and some use the tiger popover link, will also call popover with the link, so add a span link to solve the problem.

Answer 10

This is a version of the Wojtek Kruszewski solution. This handwritten version letter blinks when the mouse returns to the trigger. 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 11

I tried solutions from @Wotjek Kruszewski and @danielgatis, but none of them worked for me. Caveat: I am using Bootstrap v2.1.0, not v3. This solution is in coffeescript (why do people still use simple 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 

Answer 12

Here is what I did:

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

This is a very simple and convenient solution to this problem, which I found out by looking at the tooltip code. In Bootstrap v3.0.3, here is a line of code that I noticed:

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

this means that if the container property of the popover property is defined, then the popover gets the appendTo () element instead of the insertAfter () element of the original element, all you need to do is just pass the element as a container property. Due to appendTo (), the popover becomes part of the link on which the hover event was bound, and thus keeps the popover open when the mouse moves over it.

Answer 13

This works for me on 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(); }); 

Answer 14

At the end of the talk about @stevendaniels, there is a link to the Twitter Bootstrap extension called BootstrapX - Lee Carmichael's clickover . This changes the popover from the tooltip to an interactive control that can be closed by clicking on the form button, the close button, or after a timeout. It is easy to use and worked very well for the project I needed. Some examples of its use can be found here .

Answer 15

I didn't like any of the answers I found, so I put together a few answers that were close to compiling the following code. This allows you to simply type $(selector).pinnablepopover(options); every time you want to create a bouncing popover.

Code that simplifies:

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

Usage example:

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

Answer 16

After looking at the whole answer, I did it, I think it will be useful. You can manage everything you need. Many answers do not delay display, I use this. His work is very pleasant in my project.
/ ****** / *************************.... ******* ************ /

 <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 CODE ****************** PLEASE USE FROM HEART **** ** /

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