Do not close a popover when the mouse is hovering on it #664

Closed
abitdodgy opened this Issue Nov 19, 2011 · 30 comments

Projects

None yet
@abitdodgy

Since we can use HTML in a popover, it would be useful if the popover stayed opened when the mouse is hovering over it. This gives the user a chance to read something then click a link.

As it stands, the popover fades onMouseOut, or based on the delayOut argument. In order to use a link in the popover, we have to use a delayOut anyway to give the popover a chance to stay after onMouseOut.

But then the popover can disappear while hovering over the link.

@fat
Bootstrap member

This isn't possible with the current markup. Maybe in 2.0

@fat fat closed this Nov 19, 2011
@aaronsnow aaronsnow added a commit to aaronsnow/bootstrap that referenced this issue Nov 27, 2011
@aaronsnow aaronsnow Re issue #664, added option "stay" (default = false). When stay = tru…
…e, the twipsy/popover does not close when the mouse leaves. Coder can then choose how/when to close the twipsy/popover explicitly with twipsy('hide').
71048b0
@aaronsnow

Proposed a fix, #702 .

@parkerproject

so is this working?

@aaronsnow
@parkerproject

can you share you private builds with me, cheers

@aaronsnow

Sure -- one of the beauties of github is you can download the version I committed: https://github.com/aaronsnow/bootstrap/blob/71048b06f8d11332f7db0348a6d6514937b7a823/js/bootstrap-twipsy.js

@parkerproject

Thanks

@javierhonduco

Thx you so much!!

@abhishekdelta abhishekdelta added a commit to abhishekdelta/bootstrap that referenced this issue Jan 21, 2012
@abhishekdelta abhishekdelta Added stayOnHover feature to make the popover stay when the mouse hov…
…ers over it and hide when the mouse moves out of it. Issue #664
01c3334
@abhishekdelta

I've made a commit to make the popover stay when mouse is hovering over it and automatically hide when the mouse leaves the popover. Very useful in some cases. Hope it helps : abhishekdelta@01c3334

@MZAWeb

Are you planing to merge this into core?

@abhishekdelta

According to FAT, Bootstrap v2 already has this functionality.

@MZAWeb

Not in the stable release, at least. Nor in the demo: http://twitter.github.com/bootstrap/javascript.html#popovers

@abhishekdelta

Hmm, I didn't check on that. Here's the reply I got in my pull request : #1091 (comment)

What do you suggest ?

@MZAWeb

IDK, maybe a commiter can shed light on the matter

@fat
Bootstrap member

The functionality is here: https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L121

You will need to adjust your css - but if you add set placement: "inside top" for example, it will make the tooltip a child of the element which it is acting on rather than the body.

@MZAWeb

Not working for me... but I'll check the trunk version and adjusting my css

@MZAWeb

Just to confirm that this is working on trunk

@aaronsnow

I've got this working, but it's just making invisible / poorly positioned popovers. :-) Obviously it won't really be useful to the masses until there's some sensible default css ... hopefully that's in the offing?

@MZAWeb

@aaronsnow Why is that? I got it working wonderfully. Be sure that your container has position: relative; set up.

@reggi

Is this in the latest stable release? If so we need some clarification how how to implement it...

@louismullie

Same here...

@reggi

@louismullie I ended up just instantiating the popover using trigger: "manual" and binding the .popover("show") and .popover("hide") actions to whatever event.

@thelonecabbage

SOLVED:

Set your selected element to "position: relative;" and the position property of the popover to {position: 'in right'}

the 'in ...' places the tooltip/popover in the target element instead of the body.

not documented, but if you read through the tooltip code it's there.

@oskarwrobel

Why it isn't documented? I think it's really useful option.

@ifightcrime

@thelonecabbage thanks, works perfectly!

@bradley

For anyone else who has this problem and finds that the answers above arent working for w/e reason. You can get this effect using the following javascript (jquery) (example: http://jsfiddle.net/bradleygriffith/9xANj/ ):

$('.some_element').popover(
  {
    placement: 'right',
    offset: 10,
    trigger: 'manual',
    delay: { show: 350, hide: 100 },
    html: true,
  }
);
var timer,
    popover_parent;
function hidePopover(elem) {
    $(elem).popover('hide');
}
$('.some_element').hover(
    function() {
      var self = this;
      clearTimeout(timer);
      $('.popover').hide(); //Hide any open popovers on other elements.
      popover_parent = self
      $(self).popover('show');            
    }, 
    function() {
      var self = this;
      timer = setTimeout(function(){hidePopover(self)},300);                 
});
$('.popover').live({
  mouseover: function() {
    clearTimeout(timer);
  },
  mouseleave: function() {
    var self = this;
    timer = setTimeout(function(){hidePopover(popover_parent)},300); 
  }
});
@gtraxx

@bradley Hi I try, but replacing .live() with .on() not working :

$('.some_element').popover(
  {
    placement: 'right',
    offset: 10,
    trigger: 'manual',
    delay: { show: 350, hide: 100 },
    html: true,
  }
);
var timer,
    popover_parent;
function hidePopover(elem) {
    $(elem).popover('hide');
}
$('.some_element').hover(
    function() {
      var self = this;
      clearTimeout(timer);
      $('.popover').hide(); //Hide any open popovers on other elements.
      popover_parent = self
      $(self).popover('show');            
    }, 
    function() {
      var self = this;
      timer = setTimeout(function(){hidePopover(self)},300);                 
});
$('.popover').on({
  mouseover: function() {
    clearTimeout(timer);
  },
  mouseleave: function() {
    var self = this;
    timer = setTimeout(function(){hidePopover(popover_parent)},300); 
  }
});

Do you have a solution ?
Best regards

@bradley

@gtraxx the on selector has a slightly different syntax. Basically, you want to make that bit of your code look like this:

$(document).on({
  mouseover: function() {
    clearTimeout(timer);
  },
  mouseleave: function() {     
    timer = setTimeout(function(){hidePopover(popover_parent)},300); 
  }
}, '.popover');

Working example here: http://jsfiddle.net/bradleygriffith/KXqFh/

Check out the documentation for the jQuery on event for more information as to why.

This was referenced Dec 21, 2012
@michaw

While the 'inside' placement is useful, it becomes a problem when the element with the popover is inside a container which has overflow:hidden; set in CSS. Can you force the popover to be shown while still having it inside the containing element?

@thelonecabbage

In the new bootstrap you can use the {container:...} option to place the root of the popover in a block that is relevant to the mouse, but not an overflow (wrapper div).

worked for me, no special hacks.

@cvrebert cvrebert locked and limited conversation to collaborators Jun 14, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.