Merge pull request #404 from primer/brocs/tooltips_fix

[WIP Tooltip component updates

Author: broccolini

modules/primer-support/lib/variables/misc.scss

@@ -19,7 +19,7 @@ $box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
 
 // Tooltips
 $tooltip-max-width: 250px !default;
-$tooltip-background-color: rgba($black, 0.8) !default;
+$tooltip-background-color: $black;
 $tooltip-text-color: $white !default;
 $tooltip-delay: 0.4s !default;
 $tooltip-duration: 0.1s !default;

modules/primer-tooltips/README.md

@@ -40,11 +40,18 @@ title: Tooltips
 status: Stable
 -->
 
-Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an `aria-label` attribute.
+Add tooltips built entirely in CSS to nearly any element.
+
+{:toc}
+
+## Implementation and accessibility
 
 **Attention**: we use `aria-label` for tooltips instead of something like `data-tooltip` because it is crucial that the tooltip content is available for screen reader users as well. However, `aria-label` **replaces** the text content of an element for screen reader users, so only use tooltip if there is no better way to present the information, or consider using `title` for supplement information.
 
-In addition, you'll want to specify a direction:
+**Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
+
+## Tooltip direction
+Specify the direction of a tooltip with north, south, east, and west directions:
 
 - `.tooltipped-n`
 - `.tooltipped-ne`
@@ -55,7 +62,6 @@ In addition, you'll want to specify a direction:
 - `.tooltipped-w`
 - `.tooltipped-nw`
 
-Tooltip classes will conflict with Octicon classes, and as such, must go on a parent element instead of the icon.
 
 ```html
 <span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North side.">
@@ -84,7 +90,37 @@ Tooltip classes will conflict with Octicon classes, and as such, must go on a pa
 </span>
 ```
 
-#### Tooltips with multiple lines
+## Tooltip alignment
+Align tooltips to the left or right of an element, combined with a directional class to specify north or south.
+
+```html
+<span class="tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
+  Tooltip North East align left 1
+</span>
+<span class="tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
+  Tooltip North East align left 2
+</span>
+<span class="tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
+  Tooltip South East align left 1
+</span>
+<span class="tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
+  Tooltip South East align left 2
+</span>
+<span class="tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
+  Tooltip North West align right 1
+</span>
+<span class="tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
+  Tooltip North West align right 2
+</span>
+<span class="tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
+  Tooltip South West align right 1
+</span>
+<span class="tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
+  Tooltip South West align right 2
+</span>
+```
+
+## Tooltips with multiple lines
 Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`.
 
 
@@ -94,7 +130,7 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi
 </span>
 ```
 
-#### Tooltips No Delay
+## 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`
 

modules/primer-tooltips/lib/tooltips.scss

@@ -7,7 +7,7 @@
   position: absolute;
   z-index: 1000000;
   display: none;
-  padding: 5px $spacer-2;
+  padding: 0.5em 0.75em;
   font: normal normal 11px/1.5 $body-font;
   -webkit-font-smoothing: subpixel-antialiased;
   color: $tooltip-text-color;
@@ -21,7 +21,7 @@
   pointer-events: none;
   content: attr(aria-label);
   background: $tooltip-background-color;
-  border-radius: 3px;
+  border-radius: $border-radius;
   opacity: 0;
 }
 
@@ -35,7 +35,7 @@
   color: $tooltip-background-color;
   pointer-events: none;
   content: "";
-  border: 5px solid transparent;
+  border: 6px $border-style transparent;
   opacity: 0;
 }
 
@@ -90,14 +90,14 @@
   &::after {
     top: 100%;
     right: 50%;
-    margin-top: 5px;
+    margin-top: 6px;
   }
 
   &::before {
     top: auto;
     right: 50%;
-    bottom: -5px;
-    margin-right: -5px;
+    bottom: -7px;
+    margin-right: -6px;
     border-bottom-color: $tooltip-background-color;
   }
 }
@@ -106,12 +106,12 @@
   &::after {
     right: auto;
     left: 50%;
-    margin-left: -15px;
+    margin-left: -$spacer-3;
   }
 }
 
 .tooltipped-sw::after {
-  margin-right: -15px;
+  margin-right: -$spacer-3;
 }
 
 // Tooltips above the object
@@ -121,14 +121,14 @@
   &::after {
     right: 50%;
     bottom: 100%;
-    margin-bottom: 5px;
+    margin-bottom: 6px;
   }
 
   &::before {
-    top: -5px;
+    top: -7px;
     right: 50%;
     bottom: auto;
-    margin-right: -5px;
+    margin-right: -6px;
     border-top-color: $tooltip-background-color;
   }
 }
@@ -137,12 +137,12 @@
   &::after {
     right: auto;
     left: 50%;
-    margin-left: -15px;
+    margin-left: -$spacer-3;
   }
 }
 
 .tooltipped-nw::after {
-  margin-right: -15px;
+  margin-right: -$spacer-3;
 }
 
 // Move the tooltip body to the center of the object.
@@ -156,15 +156,15 @@
   &::after {
     right: 100%;
     bottom: 50%;
-    margin-right: 5px;
+    margin-right: 6px;
     transform: translateY(50%);
   }
 
   &::before {
     top: 50%;
     bottom: 50%;
-    left: -5px;
-    margin-top: -5px;
+    left: -7px;
+    margin-top: -6px;
     border-left-color: $tooltip-background-color;
   }
 }
@@ -174,19 +174,60 @@
   &::after {
     bottom: 50%;
     left: 100%;
-    margin-left: 5px;
+    margin-left: 6px;
     transform: translateY(50%);
   }
 
   &::before {
     top: 50%;
-    right: -5px;
+    right: -7px;
     bottom: 50%;
-    margin-top: -5px;
+    margin-top: -6px;
     border-right-color: $tooltip-background-color;
   }
 }
 
+// Tooltip align right and left
+.tooltipped-align-right-1,
+.tooltipped-align-right-2 {
+  &::after {
+    right: 0;
+    margin-right: 0;
+  }
+}
+
+.tooltipped-align-right-1 {
+  &::before {
+    right: 10px;
+  }
+}
+
+.tooltipped-align-right-2 {
+  &::before {
+    right: 15px;
+  }
+}
+
+.tooltipped-align-left-1,
+.tooltipped-align-left-2, {
+  &::after {
+    left: 0;
+    margin-left: 0;
+  }
+}
+
+.tooltipped-align-left-1 {
+  &::before {
+    left: 5px;
+  }
+}
+
+.tooltipped-align-left-2 {
+  &::before {
+    left: 10px;
+  }
+}
+
 // Multiline tooltips
 //
 // `.tooltipped-multiline` Add this class when you have long content.
@@ -270,10 +311,3 @@
     border-left-color: $background-color;
   }
 }
-
-@include retina-media-query {
-  .tooltipped-w::after {
-    // weird bug on retina
-    margin-right: 4.5px;
-  }
-}

modules/primer-tooltips/stories.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Tooltips', module)
+.add('tooltipped direction', () => (
+  <div className='p-4'>
+    <span className='tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North side.'>
+    Tooltip North
+    </span>
+    <span className='tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North East side.'>
+      Tooltip North East
+    </span>
+    <span className='tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the East side.'>
+      Tooltip East
+    </span>
+    <span className='tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South East side.'>
+      Tooltip South East
+    </span>
+    <span className='tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South side.'>
+      Tooltip South
+    </span>
+    <span className='tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South West side.'>
+      Tooltip South West
+    </span>
+    <span className='tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the West side.'>
+      Tooltip West
+    </span>
+    <span className='tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North West side.'>
+      Tooltip North West
+    </span>
+  </div>
+))
+.add('tooltip aligned', () => (
+  <div className='p-4'>
+    <span className='tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
+    Tooltip North East align left 1
+    </span>
+    <span className='tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
+    Tooltip North East align left 2
+    </span>
+    <span className='tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
+    Tooltip South East align left 1
+    </span>
+    <span className='tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
+    Tooltip South East align left 2
+    </span>
+    <span className='tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
+      Tooltip North West align right 1
+    </span>
+    <span className='tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
+      Tooltip North West align right 2
+    </span>
+    <span className='tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
+      Tooltip South West align right 1
+    </span>
+    <span className='tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
+      Tooltip South West align right 2
+    </span>
+  </div>
+  ))
+  .add('tootlipped-multiline', () => (
+    <div className='p-6'>
+      <span className='tooltipped tooltipped-multiline tooltipped-s border p-2 mr-2' aria-label='This is the tooltip with multiple lines. This is the tooltip with multiple lines.'>
+        Tooltip with multiple lines
+      </span>
+      <span className='tooltipped tooltipped-multiline tooltipped-sw tooltipped-align-right-2 border p-2' aria-label='This is the tooltip with multiple lines. This is the tooltip with multiple lines.'>
+        Tooltip with multiple lines
+      </span>
+    </div>
+  ))
+  .add('tootlip no delay', () => (
+    <div className='p-6'>
+      <span className='tooltipped tooltipped-n tooltipped-no-delay border p-2' aria-label='This is a tooltip with no delay.'>
+        Tooltip no delay
+      </span>
+    </div>
+  ))
+  .add('tooltip on button', () => (
+    <div className='p-6'>
+    <button className='btn btn-secondary tooltipped tooltipped-n' aria-label='This is the tooltip on a button.'>Button</button>
+    </div>
+))