Adding delay to tooltips

css/.primer-stats.md

@@ -11,17 +11,17 @@
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 31700
+- **Total Stylesheet Size:** 32162
 - **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:** 464
+- **Selectors Per Rule:** 1.3469827586206897
+- **Total Selectors:** 625
+- **Identifiers Per Selector:** 1.7696
+- **Specificity Per Selector:** 15.2528
 - **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:** 1106
+- **Total Declarations:** 1043
 - **Total Unique Colors:** 73
 - **Total Important Keywords:** 157

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,11 @@ $tooltip-text-color: #fff;
   &::after {
     display: inline-block;
     text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: 0.1s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in-out;
+    animation-delay: $tooltip-delay;
   }
 }
 
@@ -171,11 +185,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 +212,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,9 @@ $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.5s !default;