Keeping the focus with bootstrap's popover

Question

I've been looking at using Bootstrap's Popover widget and while I like it's look one thing that I'd love to see is the ability to place hyperlinks or buttons within the content of the popover's body. Actually place them there but the problem is allowing a user to click on them.

More specifically the problem is -- with default options anyways -- as soon as you leave the link and move toward the popover it disappears. Is there any way to address this other than just dialling up the delay { hide } setting? The "right" solution in my mind would be to keep a tight "hide setting" (aka, delay: {hide:100}) but allow for cursor movement while over the popover to not start the timer.

Hoping I'm missing an easy trick here. All and any help is welcome.

The use case is: hover over link, popover displays short description of link, in the description is a button for "more detail". If user's interest is still peaked they can then move cursor to popover and click the "more detail" button. — ken, Apr 16 '12 at 23:33
See http://stackoverflow.com/questions/7703878/how-can-i-hold-twitter-bootstrap-popover-open-until-my-mouse-moves-into-it for a possible solution to your use case. — Jon, Apr 23 '12 at 10:35

score 7 · Accepted Answer · answered May 10 '12 at 07:50

7

The code below will show the popover when the mouse goes over and it will keep it visable when the mouse moves away.

$("span[rel=popover]").popover({ trigger: 'manual' }).hover(function(e){ 
$(this).popover('show');
e.preventDefault(); 
});

To close it call

 $("span[rel=popover]").popover('hide');

HTH

answered May 10 '12 at 07:50

Sig

5,476
10
49
89

Thanks macsig. I'll give it a whirl today/tomorrow and come back with my results soon. – ken May 11 '12 at 14:17
Sorry, still haven't gotten back to this. Will try by EOW. – ken May 23 '12 at 07:05
1

How do you handle it when it leaves. what jquery event do you listen to? – netwire Jul 27 '12 at 10:49

score 6 · Answer 2 · answered Aug 11 '12 at 19:58

6

Probably a little late to the game, but I just came across this popover variant called "click over". The solution covers your needs and has a few other useful methods.

http://www.leecarmichael.com/bootstrapx-clickover/examples.html

answered Aug 11 '12 at 19:58

jp_inc

345
4
14

score 1 · Answer 3 · edited May 23 '17 at 12:24

1

I know this is very old link but for other people reference I am adding the link of other stackoverflow How can I keep bootstrap popover alive while the popover is being hovered?

edited May 23 '17 at 12:24

Community

1
1

answered Jul 14 '15 at 15:10

jan_kiran

301
3
16

Keeping the focus with bootstrap's popover

3 Answers3