Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Popover hides when hovering over popover itself #5765

Closed
tysonnero opened this Issue · 9 comments

7 participants

@tysonnero

When a popover is triggered by a hover, the popover will hide when hovering over the popover itself.
I'm fairly positive that in earlier versions of Bootstrap, this did not occur.

Live Example
http://jsfiddle.net/tysonnero/VLEf7/
Hover over then button, then try to hover over the popover content.

The use case would be if you wanted to place some type of action item in the popover such as a button or a link. Or perhaps the popover has an image in it. There would be no way to right click and save.

@Yohn

It might of been like that in previous versions, not now, but I would like to see that if / when we hover over the popover to trigger it, it would stay up until we hover out of the popover.. currently theres no fix for that

@tysonnero

@Yohn... You're right. I just confirmed with one of our developers that they did something custom to keep the popover active when hovering over the content.

So, this behavior was always there and may be valid.

@tysonnero

Okay, the popover can be enable to be sticky with following instructions in these links:

See the 2nd answer: http://stackoverflow.com/questions/7703878/how-can-i-hold-twitter-bootstrap-popover-open-until-my-mouse-moves-into-it

More info: #512

@tysonnero tysonnero closed this
@x1024

Note that there's a somewhat simple fix for the situation:

In bootstrap-tooltip.js, lines 121-124:

Change this:
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.insertAfter(this.$element)

To this:
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.appendTo(this.$element)

Voila.

@chengguangnan

None of those methods works well (v2.3.1)!

Why don't we simply register enter and leave on that popover div as well?

I can make it to work by apply those changes:

https://github.com/guangnan/bootstrap/compare/sticky-tooltip-popover
@Yohn

heres a plugin that fixes this issue as well - https://github.com/tshi0912/bootstrapx-popoverx

@TheHaff

omg why is'nt @x1024 fix merged? its perfect

@rails-hub

$('#projects').find('.project-row').each(() ->
$this = $(this)
$this.tooltip(
container: $this
trigger: "hover"
)
)

Worked Like a Charm for me.

@cvrebert cvrebert locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.