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

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

Closed
patrickhlauke opened this Issue Dec 26, 2015 · 9 comments

Comments

Projects
None yet
2 participants
@patrickhlauke
Copy link
Member

patrickhlauke commented Dec 26, 2015

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

bootstrap-v4-tooltips-ie
(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.

@patrickhlauke patrickhlauke self-assigned this Dec 26, 2015

@patrickhlauke patrickhlauke added this to the v4.0.0-alpha.3 milestone Dec 26, 2015

@patrickhlauke patrickhlauke changed the title Native browser tooltip for title shows on first keyboard focus in IE/Edge Native browser tooltip for title shows on first keyboard focus in IE/Edge (in addition to Bootstrap's custom tooltip) Dec 26, 2015

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 26, 2015

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

@patrickhlauke

This comment has been minimized.

Copy link
Member Author

patrickhlauke commented Dec 26, 2015

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

This comment has been minimized.

Copy link
Member Author

patrickhlauke commented Dec 26, 2015

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

This comment has been minimized.

Copy link
Member Author

patrickhlauke commented Dec 27, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 27, 2015

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

This comment has been minimized.

Copy link
Member Author

patrickhlauke commented Dec 27, 2015

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

This comment has been minimized.

Copy link
Member

cvrebert commented Dec 31, 2015

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

This comment has been minimized.

Copy link
Member Author

patrickhlauke commented Dec 31, 2015

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

This comment has been minimized.

Copy link
Member Author

patrickhlauke commented Mar 7, 2016

Closed via #19434

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.