diff options
| author | Patrick H. Lauke <[email protected]> | 2017-04-20 13:49:35 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-04-20 13:49:35 +0100 |
| commit | ef099ad05deaa42f92c0fce903ed75010d50e317 (patch) | |
| tree | c8d82c959ff0992592537a3e7c1f497e17117338 | |
| parent | b4ac48fdec7637c0c7c69f9d3ff9fc5d21d23676 (diff) | |
| download | bootstrap-ef099ad05deaa42f92c0fce903ed75010d50e317.tar.xz bootstrap-ef099ad05deaa42f92c0fce903ed75010d50e317.zip | |
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
| -rw-r--r-- | js/src/tooltip.js | 16 |
1 files changed, 16 insertions, 0 deletions
diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 1ff2c4f6e..c97f49108 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -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 = '' + } |