From f0da6b783026cabb43d4ffaefd80b379003375dc Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Wed, 24 Apr 2019 21:09:54 +0900
Subject: [PATCH 1/3] Hide tooltips when primary input mechanism cannot hover

---
 src/tooltips/tooltips.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss
index 1e72cff525..a43372559c 100644
--- a/src/tooltips/tooltips.scss
+++ b/src/tooltips/tooltips.scss
@@ -277,3 +277,15 @@
     }
   }
 }
+
+// Responsive tooltips
+//
+// Hide tooltips when primary input mechanism cannot hover
+@media (hover: none) {
+  .tooltipped:hover {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}

From cbbe7d054ed22aa1ef1fc2a6394f0f8848f89088 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Wed, 24 Apr 2019 21:12:44 +0900
Subject: [PATCH 2/3] Add option to still allow tooltips for touch input

---
 src/tooltips/tooltips.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss
index a43372559c..fa54ee539f 100644
--- a/src/tooltips/tooltips.scss
+++ b/src/tooltips/tooltips.scss
@@ -280,9 +280,10 @@
 
 // Responsive tooltips
 //
-// Hide tooltips when primary input mechanism cannot hover
+// Hide tooltips when primary input mechanism cannot hover (default)
+// Enable tooltips for touch input with .tooltipped-touch
 @media (hover: none) {
-  .tooltipped:hover {
+  .tooltipped:not(.tooltipped-touch):hover {
     &::before,
     &::after {
       display: none;

From 4ea261bf8af35c7bb7f8fde439a8465a02cc4fee Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 25 Apr 2019 10:51:31 +0900
Subject: [PATCH 3/3] Add documentation

---
 pages/css/components/tooltips.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/pages/css/components/tooltips.md b/pages/css/components/tooltips.md
index 869af1f1e6..c2c834f1a3 100644
--- a/pages/css/components/tooltips.md
+++ b/pages/css/components/tooltips.md
@@ -118,3 +118,22 @@ By default the tooltips have a slight delay before appearing. This is to keep mu
   </span>
 </div>
 ```
+
+## Tooltips for touch input
+
+**Note**: We hide tooltips when the primary input mechanism cannot hover. For example on mobile phones or tablets where the primary input method is touch.
+
+Use the `tooltipped-touch` modifier class to enable tooltips also for touch input. Most mobile browsers mimick hovering by tapping once. Try to avoid using tooltips on mobile where a user performs a certain action (buttons, links), because the tooltip will only show up after the action already happened.
+
+```html
+<div>
+  <span class="tooltipped tooltipped-e d-inline-block border p-2" aria-label="Hidden on mobile">
+    .tooltipped
+  </span>
+</div>
+<div class="mt-3">
+  <span class="tooltipped tooltipped-touch tooltipped-n d-inline-block border p-2" aria-label="Shows on mobile">
+    .tooltipped .tooltipped-touch
+  </span>
+</div>
+```