From 090768972b8962bce88f2d259205682549cc2279 Mon Sep 17 00:00:00 2001
From: luis cielak <luis+dds@promptworks.com>
Date: Thu, 9 Aug 2018 13:49:17 -0400
Subject: [PATCH] Add example tooltips

---
 js/index.js                       |   4 ++
 styles/atat.scss                  |   1 +
 styles/elements/_tooltip.scss     | 109 ++++++++++++++++++++++++++++++
 templates/components/tooltip.html |   0
 templates/styleguide.html         |   5 ++
 5 files changed, 119 insertions(+)
 create mode 100644 styles/elements/_tooltip.scss
 create mode 100644 templates/components/tooltip.html

diff --git a/js/index.js b/js/index.js
index 59883c65..76c3d81e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,8 +1,12 @@
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
+import VTooltip from 'v-tooltip'
 
 import textinput from './components/text_input'
 
+Vue.use(VTooltip)
+
+
 const app = new Vue({
   el: '#app-root',
   components: {
diff --git a/styles/atat.scss b/styles/atat.scss
index ad650bbd..70d9d4b9 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -16,6 +16,7 @@
 @import 'elements/action_group';
 @import 'elements/labels';
 @import 'elements/diff';
+@import 'elements/tooltip';
 
 @import 'components/topbar';
 @import 'components/global_layout';
diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss
new file mode 100644
index 00000000..91e0e7cf
--- /dev/null
+++ b/styles/elements/_tooltip.scss
@@ -0,0 +1,109 @@
+.tooltip {
+  display: block;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: $color-black;
+    color: $color-white;
+    border-radius: $border-radius;
+    padding: 5px 10px 4px;
+  }
+
+  .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;
+  }
+}
\ No newline at end of file
diff --git a/templates/components/tooltip.html b/templates/components/tooltip.html
new file mode 100644
index 00000000..e69de29b
diff --git a/templates/styleguide.html b/templates/styleguide.html
index a65069c4..753e2d94 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -128,6 +128,11 @@
         <div class='col col--grow'>col 12</div>
       </div>
 
+        <h5>Tooltips</h5>
+        <span v-tooltip="'this is a tooltip text'">{{ Icon('help') }}</span><code>top</code> <br>
+        <span v-tooltip.top-start="'this is a tooltip text'">{{ Icon('help') }}</span><code>top-start</code> <br>
+        <span v-tooltip.right="'this is a tooltip text'">{{ Icon('help') }}</span><code>right</code> <br>
+        <span v-tooltip.bottom="'this is a tooltip text'">{{ Icon('help') }}</span><code>bottom</code> <br>
 
       <form>
         <textinput inline-template validation='dollars' value='1231231'>