Native browser tooltip for title shows on first keyboard focus in IE/Edge (in addition to Bootstrap's custom tooltip)

[patrickhlauke]

IE11 and Microsoft Edge show a native tooltip for focusable elements with a title attribute when focused with the keyboard (while other browsers generally only show the native tooltip when hovering with the mouse). Bootstrap's tooltips blank out the title attribute on when they're focused/hovered, but not fast enough for IE11/Edge not to see them and trigger the native tooltip, meaning that when navigating with the keyboard in IE11/Edge, the first time an element with a tooltip is focused, both the native tooltip and the bootstrap tooltip are shown simultaneously. If the user focuses another element and then returns to this element, no native tooltip is shown (as by that point the title is empty).

(note that in this screenshot, a special red focus outline was forced using a custom stylesheet, for clarity)

Likely solution would be to blank the title out directly when they're initialised, rather than relying on this to happen when they're first focused/hovered.

[cvrebert]

Isn't it arguably a bug that IE11/Edge doesn't close the native tooltip when the title attribute is modified?

[patrickhlauke]

It's more of a race condition, I'd say. IE11/Edge are just a tad quicker at displaying the native tooltip before the attribute is blanked. Once a native tooltip is shown, I don't think (though I'd have to test if necessary) any browser modifies it "live" if the attribute itself is changed.

[patrickhlauke]

As tooltips are opt-in and require an explicit script initialisation anyway, it shouldn't be a problem blanking the title as part of the step though, i think.

[patrickhlauke]

Unless I'm mistaken, the source of the problem is the code below in tooltip.js

      if (this.config.selector) {
        this.config = $.extend({}, this.config, {
          trigger  : 'manual',
          selector : ''
        })
      } else {
        this._fixTitle()
      }
    }

which, if I understand it correctly, only runs _fixTitle() if there was no explicit selector given on initialisation. Taking the docs as an example, we do have a selector, but the elements do also have an actual title. Wonder if _fixTitle() should be run regardless of selector...worst case, it may simply run and produce no result?

[cvrebert]

As tooltips are opt-in and require an explicit script initialisation anyway, it shouldn't be a problem blanking the title as part of the step though, i think.

It wouldn't work in event delegation cases (unless we started using mutation observers/events), because some tooltipped elements might not yet exist at the time of the explicit initialization call.

[patrickhlauke]

Wonder if the advice for those cases should be to go straight for using data-original-title instead of title. But yeh, fair enough. Still wouldn't call IE11/Edge behavior a bug as such, just a difference in implementation which we can't currently account for.

[cvrebert]

Wonder if the advice for those cases should be to go straight for using data-original-title instead of title

Wouldn't some accessibility wonks would get mad due to the effect on users without JavaScript?

[patrickhlauke]

maybe i misunderstood what you meant by event delegation cases...thought you meant something more akin to dynamic tooltips being generated on the fly (which would need JS to be running in the first place anyway). got a concrete example of where doing this on initialisation would fail?

[patrickhlauke]

Closed via #19434