Merge pull request #164 from dod-ccpo/ui/tooltips

UI/tooltips

styles/atat.scss

@@ -16,6 +16,7 @@
 @import 'elements/action_group';
 @import 'elements/labels';
 @import 'elements/diff';
+@import 'elements/tooltip';
 @import 'elements/kpi';
 
 @import 'components/topbar';

styles/elements/_inputs.scss

@@ -27,7 +27,7 @@
     $state-color: $color-green;
   }
 
-  .icon {
+  .icon-validation {
     @include icon-color($state-color);
   }
 
@@ -71,7 +71,7 @@
     @include line-max;
     position: relative;
 
-    .icon {
+    .icon-validation {
       position: absolute;
       left: 100%;
       top: 100%;
@@ -79,13 +79,27 @@
       margin-left: $gap;
     }
   }
+  
+  .usa-input__title {
+    display: flex;
+    align-items: center;
 
+    .icon-tooltip {
+      padding: 0 $gap/2;
+      cursor: default;
+      margin-left: $gap/2;
+    }
+  }
+  
   .usa-input__help {
-    display: block;
     @include h4;
     font-weight: normal;
     padding: $gap/2 0;
     @include line-max;
+
+    .icon-link {
+      padding: 0 $gap/2;
+    }
   }
 
   input,
@@ -93,6 +107,17 @@
   select {
     @include line-max;
     margin: 0;
+    box-sizing: border-box;
+
+    &:hover,
+    &:focus {
+      border-color: $color-blue;
+      color: $color-blue;
+      box-shadow: inset 0 0 0 1px $color-blue;
+      &::placeholder {
+        color: $color-blue;
+      }
+    }
   }
 
   .usa-input__choices { // checkbox & radio sets
@@ -104,10 +129,6 @@
         font-weight: $font-bold;
       }
 
-      .icon {
-        vertical-align: middle;
-      }
-
     }
 
     ul {
@@ -121,6 +142,12 @@
         [type='radio'] + label,
         [type='checkbox'] + label {
           margin: 0;
+          &:hover {
+            color: $color-blue;
+            &:before {
+              box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-blue;
+            }
+          }
         }
       }
     }

styles/elements/_tooltip.scss

@@ -0,0 +1,119 @@
+.tooltip {
+  display: block;
+  z-index: 10000;
+  max-width: $text-max-width;
+
+  .tooltip-inner {
+    background: $color-black;
+    color: $color-white;
+    border-radius: $border-radius;
+    padding: $gap*2;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: black;
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-top-color: transparent;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent;
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    $color: #f9f9f9;
+
+    .popover-inner {
+      background: $color;
+      color: black;
+      padding: 24px;
+      border-radius: 5px;
+      box-shadow: 0 5px 30px rgba(black, .1);
+    }
+
+    .popover-arrow {
+      border-color: $color;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
+}
+
+
+.icon-tooltip {
+  @include icon-link;
+
+  .icon {
+    @include icon-size(16);
+  }
+}