Merge pull request #181 from primer/tooltip-delay

Adding a 0.5s delay to showing tooltips

css/.primer-stats.md

@@ -11,17 +11,17 @@
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 31700
+- **Total Stylesheet Size:** 32411
 - **Total Media Queries:** 1
-- **Total Rules:** 462
-- **Selectors Per Rule:** 1.3484848484848484
-- **Total Selectors:** 623
-- **Identifiers Per Selector:** 1.768860353130016
-- **Specificity Per Selector:** 15.296950240770466
+- **Total Rules:** 465
+- **Selectors Per Rule:** 1.356989247311828
+- **Total Selectors:** 631
+- **Identifiers Per Selector:** 1.7812995245641838
+- **Specificity Per Selector:** 15.402535657686212
 - **Top Selector Specificity:** 41
 - **Top Selector Specificity Selector:** .form-group.warn .warning::after
 - **Total Id Selectors:** 0
-- **Total Identifiers:** 1102
-- **Total Declarations:** 1029
+- **Total Identifiers:** 1124
+- **Total Declarations:** 1046
 - **Total Unique Colors:** 73
 - **Total Important Keywords:** 157

docs/tooltips.md

@@ -19,7 +19,38 @@ In addition, you'll want to specify a direction:
 Tooltip classes will conflict with Octicon classes, and as such, must go on a parent element instead of the icon.
 
 {% example html %}
-<span class="tooltipped tooltipped-n" aria-label="This is the tooltip.">
-  Text with a tooltip
+<span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North
+</span>
+<span class="tooltipped tooltipped-ne border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North East
+</span>
+<span class="tooltipped tooltipped-e border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip East
+</span>
+<span class="tooltipped tooltipped-se border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South East
+</span>
+<span class="tooltipped tooltipped-s border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South
+</span>
+<span class="tooltipped tooltipped-sw border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip South West
+</span>
+<span class="tooltipped tooltipped-w border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip West
+</span>
+<span class="tooltipped tooltipped-nw border p-2 mb-2 mr-2 left" aria-label="This is the tooltip.">
+  Tooltip North West
+</span>
+{% endexample %}
+
+### Tooltips No Delay
+
+By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay`
+
+{% example html %}
+<span class="tooltipped tooltipped-n tooltipped-no-delay border p-2" aria-label="This is the tooltip.">
+  Tooltip no delay
 </span>
 {% endexample %}

scss/_tooltips.scss

@@ -1,7 +1,3 @@
-$multiline-max-width: 250px;
-$tooltip-background-color: rgba(0, 0, 0, 0.8);
-$tooltip-text-color: #fff;
-
 .tooltipped {
   position: relative;
 }
@@ -29,6 +25,7 @@ $tooltip-text-color: #fff;
   background: $tooltip-background-color;
   border-radius: 3px;
   -webkit-font-smoothing: subpixel-antialiased;
+  opacity: 0;
 }
 
 // This is the tooltip arrow
@@ -42,6 +39,18 @@ $tooltip-text-color: #fff;
   pointer-events: none;
   content: "";
   border: 5px solid transparent;
+  opacity: 0;
+}
+
+// delay animation for tooltip
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 // This will indicate when we'll activate the tooltip
@@ -52,6 +61,21 @@ $tooltip-text-color: #fff;
   &::after {
     display: inline-block;
     text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: $tooltip-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+    animation-delay: $tooltip-delay;
+  }
+}
+
+.tooltipped-no-delay:hover,
+.tooltipped-no-delay:active,
+.tooltipped-no-delay:focus {
+  &::before,
+  &::after {
+    opacity: 1;
+    animation: none;
   }
 }
 
@@ -171,11 +195,11 @@ $tooltip-text-color: #fff;
 //
 // `.tooltipped-multiline` Add this class when you have long content.
 // The downside is you cannot preformat the text with newlines and `[w,e]`
-// are always `$multiline-max-width` wide.
+// are always `$tooltip-max-width` wide.
 .tooltipped-multiline {
   &::after {
     width: max-content;
-    max-width: $multiline-max-width;
+    max-width: $tooltip-max-width;
     word-break: break-word;
     word-wrap: normal;
     white-space: pre-line;
@@ -198,7 +222,7 @@ $tooltip-text-color: #fff;
 @media screen and (min-width:0\0) {
   // IE9 and IE10 rule sets go here
   .tooltipped-multiline::after {
-    width: $multiline-max-width;
+    width: $tooltip-max-width;
   }
 }
 

scss/_variables.scss

@@ -105,3 +105,10 @@ $mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 
 // The base body size
 $body-font-size: 13px !default;
+
+// Tooltips
+$tooltip-max-width: 250px !default;
+$tooltip-background-color: rgba(0, 0, 0, 0.8) !default;
+$tooltip-text-color: #fff !default;
+$tooltip-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;