From ef099ad05deaa42f92c0fce903ed75010d50e317 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 20 Apr 2017 13:49:35 +0100 Subject: [PATCH] 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 `` in order to coax iOS into proper event delegation/bubbling --- js/src/tooltip.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 1ff2c4f6e0e9..c97f491084cd 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 = '' + }