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

redbmk · 2015-01-22T01:05:12Z

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

twbs-lmvtfy · 2015-01-22T01:05:16Z

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

redbmk · 2015-01-22T01:08:39Z

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

cvrebert · 2015-01-22T01:23:02Z

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

redbmk · 2015-01-22T02:20:06Z

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?

cvrebert · 2015-01-22T02:25:27Z

Semi-duplicate of #2298.

cvrebert · 2015-01-22T02:36:48Z

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.

redbmk · 2015-01-22T19:50:04Z

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/

redbmk · 2015-01-22T20:28:12Z

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");
    };
})();

ericmdantas · 2015-02-05T15:07:56Z

Same problem here.

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

cvrebert · 2015-04-21T22:53:43Z

Punting anything involving MutationObserver to consideration for Bootstrap v4.

cvrebert added the js label Jan 22, 2015

cvrebert added the confirmed label Jan 22, 2015

cvrebert mentioned this issue Apr 21, 2015

Modal backdrop does not disappear, when modal-dialog being removed in HTML #16320

Closed

cvrebert closed this as completed Apr 21, 2015

mdo mentioned this issue Aug 19, 2015

v4 #17021

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

redbmk commented Jan 22, 2015

twbs-lmvtfy commented Jan 22, 2015

redbmk commented Jan 22, 2015

cvrebert commented Jan 22, 2015

redbmk commented Jan 22, 2015

cvrebert commented Jan 22, 2015

cvrebert commented Jan 22, 2015

redbmk commented Jan 22, 2015

redbmk commented Jan 22, 2015

ericmdantas commented Feb 5, 2015

cvrebert commented Apr 21, 2015

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

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

Comments

redbmk commented Jan 22, 2015

twbs-lmvtfy commented Jan 22, 2015

redbmk commented Jan 22, 2015

cvrebert commented Jan 22, 2015

redbmk commented Jan 22, 2015

cvrebert commented Jan 22, 2015

cvrebert commented Jan 22, 2015

redbmk commented Jan 22, 2015

redbmk commented Jan 22, 2015

ericmdantas commented Feb 5, 2015

cvrebert commented Apr 21, 2015