]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: b4ac48f)
Add iOS hack to tooltips
authorPatrick H. Lauke <redux@splintered.co.uk>
Thu, 20 Apr 2017 12:49:35 +0000 (13:49 +0100)
committerGitHub <noreply@github.com>
Thu, 20 Apr 2017 12:49:35 +0000 (13:49 +0100)
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

js/src/tooltip.js patch | blob | blame | history

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 1ff2c4f6e0e9d6f743a87d2b32f5aa54615a87ba..c97f491084cd049733343fda4a32a61661c09292 100644 (file)
--- 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 = ''
+
     }
 
 
Mirror of https://github.com/twbs/bootstrap.git