From 30a84c3ac6075e116015047882abaf9747143e39 Mon Sep 17 00:00:00 2001
From: luis cielak <luis+dds@promptworks.com>
Date: Thu, 9 Aug 2018 14:06:29 -0400
Subject: [PATCH] Make tooltip module and update example

---
 templates/components/tooltip.html | 9 +++++++++
 templates/styleguide.html         | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/templates/components/tooltip.html b/templates/components/tooltip.html
index e69de29b..465d57e4 100644
--- a/templates/components/tooltip.html
+++ b/templates/components/tooltip.html
@@ -0,0 +1,9 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro Tooltip(message) -%}
+
+  <span v-tooltip="{content: '{{message}}'}">
+    {{ Icon('help') }}
+  </span>
+
+{%- endmacro %}
diff --git a/templates/styleguide.html b/templates/styleguide.html
index f5b32657..80d72fae 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -3,6 +3,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/modal.html" import Modal %}
 {% from "components/alert.html" import Alert %}
+{% from "components/tooltip.html" import Tooltip %}
 
 
 {% block content %}
@@ -283,13 +284,14 @@
 
       </form>
 
-      <hr>
       <h5>Tooltips</h5>
-      <span v-tooltip="'this is a tooltip text'">{{ Icon('help') }}</span><code>top</code> <br>
+      {{ Tooltip('this is a tooltip text') }}<code>example</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>
 
+
+
     </div>
   </div>