mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Add iOS hack to tooltips
Same hack as in https://github.com/twbs/bootstrap/pull/22426 (modulo the selector, which is wrong in that PR and will be updated in a separate PR) to get tooltips to work correctly on iOS. Dynamically adds/removes empty (`noop`) `touchstart` event handlers to all children of `<body>` in order to coax iOS into proper event delegation/bubbling
This commit is contained in:
parent
b4ac48fdec
commit
ef099ad05d
1 changed files with 16 additions and 0 deletions
|
@ -304,6 +304,15 @@ const Tooltip = (($) => {
|
|||
|
||||
$(tip).addClass(ClassName.SHOW)
|
||||
|
||||
// if this is a touch-enabled device we add extra
|
||||
// empty mouseover listeners to the body's immediate children;
|
||||
// only needed because of broken event delegation on iOS
|
||||
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
||||
if ('ontouchstart' in document.documentElement &&
|
||||
!$(parent).closest(Selector.NAVBAR_NAV).length) {
|
||||
$('body').children().on('mouseover', null, $.noop)
|
||||
}
|
||||
|
||||
const complete = () => {
|
||||
const prevHoverState = this._hoverState
|
||||
this._hoverState = null
|
||||
|
@ -352,6 +361,12 @@ const Tooltip = (($) => {
|
|||
|
||||
$(tip).removeClass(ClassName.SHOW)
|
||||
|
||||
// if this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
$('body').children().off('mouseover', null, $.noop)
|
||||
}
|
||||
|
||||
this._activeTrigger[Trigger.CLICK] = false
|
||||
this._activeTrigger[Trigger.FOCUS] = false
|
||||
this._activeTrigger[Trigger.HOVER] = false
|
||||
|
@ -368,6 +383,7 @@ const Tooltip = (($) => {
|
|||
}
|
||||
|
||||
this._hoverState = ''
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue