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>