Add iOS hack to tooltips

Same hack as in #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
twbs · Apr 20, 2017 · ef099ad · ef099ad
1 parent b4ac48f
commit ef099ad
Showing 1 changed file with 16 additions and 0 deletions.
diff --git 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 = ''
+
     }