Firefox hangs on to tooltip after the item has been disabled and/or destroyed

By default bootstrap doesn't allow for tooltips being active on disabled buttons. However, there seems to be a bug in Firefox where if the tooltip is showing when the button becomes disabled it will continue to show until the button is re-enabled and the user hovers in and out of the button. In the same fashion, if the button is removed while the tooltip is showing then the tooltip will stick around again.

I've created a simple jsBin to showcase both scenarios:

The first two buttons have tooltips. If you click the first, you'll see it stick around while the button is disabled. The third button will disable/enable the first two buttons, so you can click that to re-enable the first and will then be able to remove the tooltip.
The second button has a tooltip, and clicking it will remove all the buttons on screen. Doing so will leave the tooltip hanging around and there will be no way to remove it. If you had already disabled the first button by clicking on it, you'll now have two tooltips that will stick around until you refresh.

The bug does not present itself in Chrome (v39), but does in Firefox (v35).

@redbmk

Hi @redbmk!

You appear to have posted a live example (http://jsbin.com/pudojataxo/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
W003: <head> is missing viewport <meta> tag that enables responsiveness
line 11, column 3: W007: Found one or more <button>s missing a type attribute.
line 12, column 3: W007: Found one or more <button>s missing a type attribute.
line 13, column 3: W007: Found one or more <button>s missing a type attribute.

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.)

Fixed the bootlint errors: http://jsbin.com/pudojataxo/2/
Still seeing the issue.

(1) and (2) confirmed in Mac Firefox and in Mac Safari 8.0.2.
(2) reproduces in Mac Chrome, (1) doesn't.

However, the arguable answer here is "Well, you should be destroying/hiding the tooltips yourself when you disable/remove their buttons like that". We've generally shied away from using Mutation Observers or the like, which is the only framework-agnostic approach I'm aware of to implement something like this.

By default bootstrap doesn't allow for tooltips being active on disabled buttons.

To be pedantic, it's HTML that doesn't allow for it. Browsers don't fire hover events on disabled buttons.

Ah, yeah I see (2) in Chrome as well.

Hmm, it looks like using bootstrap's disabled class rather than setting the disabled property on the item fixes (1), so that may be the way to go for that. And it should be easy enough to clean up before removing.

I actually ran into this issue when using knockout, which has "enable" and "disable" bindings that make things pretty convenient. I'll just have to remember to avoid using those for buttons with tooltips.

Is browser support the main reason for shying away from Mutation Observers, or is it more of a performance issue?

Semi-duplicate of #2298.

@fat

A fellow Knockout user! Hi brother 👋

Is browser support the main reason for shying away from Mutation Observers, or is it more of a performance issue?

Actually, I can't find an outright rejection anywhere of the idea of using mutation observers now that I look for one.
They're only available in IE in IE11+, so that's certainly one strike against it. It also just generally makes the code more complex.
Maybe we could consider supporting it in Bootstrap v4 in a progressive enhancement fashion? That sort of large-scale architectural decision is in @fat's domain. I can't really speak to it myself.

Bootstrap 4 support would be awesome.

The jsbin I created previously had expired. I've cloned it after logging in so it should stick around longer now: http://jsbin.com/kupugi/2/

This is a little weird, but I also found out that in Chrome you can get (1) to recreate by opening the console, hovering to get the tooltip, then moving the mouse out of the frame screen really fast. When you move the mouse back into the frame the tooltip will go away unless you first disable the button in the console.

Probably not something that would happen often, but the observers would likely solve that issue as well.

Here's a quick fix to (1:FireFox) for knockout users wanting to keep using the enable/disable bindings:

(function () {
    var ogEnableUpdate  = ko.bindingHandlers.enable.update,
        ogDisableUpdate = ko.bindingHandlers.disable.update;

    ko.bindingHandlers.enable.update = function (element, valueAccessor) {
        ogEnableUpdate(element, valueAccessor);
        if (element.disabled && $(element).data("bs.tooltip")) $(element).tooltip("hide");
    };

    ko.bindingHandlers.disable.update = function (element, valueAccessor) {
        ogDisableUpdate(element, valueAccessor);
        if (element.disabled && $(element).data("bs.tooltip")) $(element).tooltip("hide");
    };
})();

Same problem here.

Doesn't happen in Chrome, but it does happen in Firefox and IE.

Punting anything involving MutationObserver to consideration for Bootstrap v4.

Navigation Menu

Repository navigation

Firefox hangs on to tooltip after the item has been disabled and/or destroyed #15632

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Firefox hangs on to tooltip after the item has been disabled and/or destroyed #15632

Description

Activity

twbs-lmvtfy commented on Jan 22, 2015

redbmk commented on Jan 22, 2015

cvrebert commented on Jan 22, 2015

redbmk commented on Jan 22, 2015

cvrebert commented on Jan 22, 2015

cvrebert commented on Jan 22, 2015

redbmk commented on Jan 22, 2015

redbmk commented on Jan 22, 2015

ericmdantas commented on Feb 5, 2015

cvrebert commented on Apr 21, 2015

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions