From d793390df6e91c471318cdbcf9520460cd36e544 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 14 Aug 2018 14:05:50 -0400
Subject: [PATCH] new styles for tooltips

---
 styles/elements/_tooltip.scss     | 49 ++++++++++---------------------
 templates/components/tooltip.html |  2 +-
 2 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss
index 57995336..44876171 100644
--- a/styles/elements/_tooltip.scss
+++ b/styles/elements/_tooltip.scss
@@ -2,36 +2,31 @@
   display: block;
   z-index: 10000;
   max-width: $text-max-width;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
 
   .tooltip-inner {
-    background: $color-black;
-    color: $color-white;
-    border-radius: $border-radius;
-    padding: $gap*2;
+    background-color: $color-aqua-lightest;
+    padding: $gap * 3;
+    border-left: ($gap / 2) solid $color-blue;
   }
 
   .tooltip-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
+    width: 1rem;
+    height: 1rem;
     position: absolute;
-    margin: 5px;
-    border-color: black;
+    background-color: $color-aqua-lightest;
     z-index: 1;
+    box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
   }
 
   &[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;
+      transform: rotate(-45deg);
+      box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
     }
   }
 
@@ -39,14 +34,10 @@
     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;
+      transform: rotate(135deg);
+      box-shadow: -2px 2px 2px -2px rgba(0,0,0,0.25);
     }
   }
 
@@ -54,14 +45,9 @@
     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;
+      transform: rotate(-135deg);
     }
   }
 
@@ -69,14 +55,9 @@
     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;
+      transform: rotate(45deg);
     }
   }
 
@@ -116,4 +97,4 @@
   .icon {
     @include icon-size(16);
   }
-}
\ No newline at end of file
+}
diff --git a/templates/components/tooltip.html b/templates/components/tooltip.html
index 429dc138..d1af4f0c 100644
--- a/templates/components/tooltip.html
+++ b/templates/components/tooltip.html
@@ -2,7 +2,7 @@
 
 {% macro Tooltip(message,title='Help') -%}
 
-  <span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
+  <span class="icon-tooltip" v-tooltip.top="{content: '{{message}}'}">
     {{ Icon('help') }}<span>{{ title }}</span>
   </span>