Add callout to inform about the context of the stylized implementation

.bundlewatch.config.json

@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "29.5 kB"
+      "maxSize": "29.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",

scss/_reboot.scss

@@ -133,15 +133,23 @@ p {
 
 
 // Abbreviations
-//
-// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
-// 2. Add explicit cursor to indicate changed behavior.
-// 3. Prevent the text-decoration to be skipped.
 
-abbr[title] {
-  text-decoration: underline dotted; // 1
-  cursor: help; // 2
-  text-decoration-skip-ink: none; // 3
+@media (hover: none) {
+  abbr[title] {
+    text-decoration: none;
+  }
+}
+
+@media (hover: hover) {
+  // 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+  // 2. Add explicit cursor to indicate changed behavior.
+  // 3. Prevent the text-decoration to be skipped.
+
+  abbr[title] {
+    text-decoration: underline dotted; // 1
+    cursor: help; // 2
+    text-decoration-skip-ink: none; // 3
+  }
 }
 
 

site/content/docs/5.2/content/typography.md

@@ -141,6 +141,10 @@ Change text alignment, transform, style, weight, line-height, decoration and col
 
 Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
 
+{{< callout info >}}
+This stylized implementation will only be rendered if the primary input mechanism can conveniently hover over elements.
+{{< /callout >}}
+
 Add `.initialism` to an abbreviation for a slightly smaller font-size.
 
 {{< example >}}