Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip closes when hovering over <use>d rects from SVG <symbol> in Firefox & Edge #19670

Closed
val- opened this Issue Apr 4, 2016 · 16 comments

Comments

Projects
None yet
5 participants
@val-
Copy link

val- commented Apr 4, 2016

Bootstrap tooltips work well with inline SVG images.
But I have a trouble with tooltip on SVG symbol image in fiefox.
At first sight it work. But when user move mouse over image tooltip blinking.
I can reproduce this bug in Firefox 45 on Ububntu 14.04 and Firefox 45 on Windows Vista.

Here very simple example http://codepen.io/webkoder/pen/zqENyo

@twbs-lmvtfy

This comment has been minimized.

Copy link

twbs-lmvtfy commented Apr 4, 2016

Hi @val-!

You appear to have posted a live example (http://codepen.io/webkoder/pen/zqENyo.html), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 33, column 3 thru column 8: End tag svg did not match the name of the current open element (use).

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@val-

This comment has been minimized.

Copy link
Author

val- commented Apr 4, 2016

twbs-lmvtfy, thank you. I close use tag. Now HTML valid.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Apr 4, 2016

Reposting to trigger re-validation: http://codepen.io/webkoder/pen/zqENyo

@cvrebert cvrebert changed the title Tooltip blinking on SVG symbol in firefox Tooltip closes when hovering over <use>d rects from SVG <symbol> in Firefox Apr 4, 2016

@cvrebert cvrebert added the confirmed label Apr 4, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Apr 5, 2016

Some work on a debugging pen: http://codepen.io/cvrebert/pen/RajVGb

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Apr 6, 2016

Interestingly, this seems to also reproduce in Microsoft Edge 13.

@cvrebert cvrebert changed the title Tooltip closes when hovering over <use>d rects from SVG <symbol> in Firefox Tooltip closes when hovering over <use>d rects from SVG <symbol> in Firefox & Edge Apr 6, 2016

@cvrebert cvrebert added this to the v3.3.7 milestone Jun 3, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

Filed Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1278000

[Edit: Marked as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=577785 ]

cvrebert added a commit that referenced this issue Jun 4, 2016

cvrebert added a commit that referenced this issue Jun 4, 2016

cvrebert added a commit that referenced this issue Jun 4, 2016

Port #20036 to v3
Add Wall of Browser Bugs entry for #19670 for Firefox (#20036)

See https://bugzil.la/1278000
Refs #19670

[skip sauce]
@cvrebert

This comment has been minimized.

cvrebert added a commit that referenced this issue Jun 4, 2016

Port #20037 to v3
Add Wall of Browser Bugs entry for #19670 for Edge (#20037)

See https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318/
Refs #19670

[skip sauce]
@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 4, 2016

@XhmikosR @hnrch02 Thoughts on whether we could/should attempt a workaround?

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Jun 4, 2016

So this only works right with Chrome?

I'm wondering how exactly we could work around this without too many changes.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 4, 2016

It also works correctly in Safari.
(And given that Edge is largely trying to be compatible with WebKit, it's not unlikely that they might be open to harmonizing with the WebKit/Blink behavior.)

cvrebert added a commit that referenced this issue Jun 4, 2016

https://bugzil.la/1278000 was marked as dupe of https://bugzil.la/577785


Update Wall of Browser Bugs accordingly.
Refs #19670

[ci skip]

cvrebert added a commit that referenced this issue Jun 4, 2016

Port 10ce366 to v3
https://bugzil.la/1278000 was marked as dupe of https://bugzil.la/577785

Update Wall of Browser Bugs accordingly.
Refs #19670

[ci skip]
@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Jun 5, 2016

@cvrebert How do you reckon we would work around this? I guess we could try not immediately hiding the tooltip on mouseleave. Not sure if it's worth it though.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 5, 2016

Yeah, I guess something like "on mouseleave, if relatedTarget is a descendant of the target, ignore the mouseleave"

Not sure if it's worth it though.

Yeah, I'm likewise ambivalent about this.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 10, 2016

@XhmikosR @hnrch02 Should we deem this WontFix?

@hnrch02

This comment has been minimized.

Copy link
Member

hnrch02 commented Jun 10, 2016

Yeah, as a browser bug.

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Jun 10, 2016

Agreed.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 10, 2016

Closing as WontFix per the consensus then.
Upstream browser bugs have already been filed.

@cvrebert cvrebert closed this Jun 10, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.