From 6b4e05e834e42870560d04cf68a28ec84c254ac0 Mon Sep 17 00:00:00 2001
From: Raymond Muller <raymond.muller.1989@gmail.com>
Date: Wed, 29 Sep 2021 17:29:22 +0200
Subject: [PATCH] feat: string support

---
 README.md                      |  1 +
 docs/content/en/basic-usage.md |  1 +
 playground/pages/Index.vue     | 14 +++++++++++++-
 src/directive/index.ts         |  4 ++--
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3afbff4..c2a796e 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@ app.mount('#app')
 ```html
 <template>
   <button v-tippy="{ content: 'Hi!' }">Tippy!</button>
+  <button v-tippy="'Hello!'">Tippy!</button>
 </template>
 
 <!-- 
diff --git a/docs/content/en/basic-usage.md b/docs/content/en/basic-usage.md
index 656108e..02e6a48 100644
--- a/docs/content/en/basic-usage.md
+++ b/docs/content/en/basic-usage.md
@@ -10,6 +10,7 @@ position: 4
 ```html
 <template>
   <button v-tippy="{ content: 'Hi!' }">Tippy!</button>
+  <button v-tippy="'Hello!'">Tippy!</button>
 </template>
 
 <!-- 
diff --git a/playground/pages/Index.vue b/playground/pages/Index.vue
index 713c508..fed9204 100644
--- a/playground/pages/Index.vue
+++ b/playground/pages/Index.vue
@@ -176,12 +176,24 @@
     <div class="mt-6">
       <span class="font-semibold mr-4">v-tippy:</span>
       <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        class="text-sm py-2 px-3 mr-4 bg-gray-900 text-white rounded-lg"
         @tippyMount="() => log('v-tippy mounted')"
         v-tippy="{ content: 'Hello ' + counter }"
       >
         Tippy directive
       </button>
+      <button
+        class="text-sm py-2 px-3 mr-4 bg-gray-900 text-white rounded-lg"
+        v-tippy="'Passing in a string'"
+      >
+        Tippy directive with a string
+      </button>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        v-tippy="`Hello ${counter}`"
+      >
+        Tippy directive with template literals
+      </button>
     </div>
 
     <div class="mt-6 space-x-2">
diff --git a/src/directive/index.ts b/src/directive/index.ts
index fe0f150..6668375 100644
--- a/src/directive/index.ts
+++ b/src/directive/index.ts
@@ -3,7 +3,7 @@ import { Directive } from 'vue'
 
 const directive: Directive = {
   mounted(el, binding, vnode) {
-    const opts = binding.value || {}
+    const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {}
 
     if (vnode.props && vnode.props.onTippyShow) {
       opts.onShow = function (...args: any[]) {
@@ -55,7 +55,7 @@ const directive: Directive = {
   },
 
   updated(el, binding) {
-    const opts = binding.value || {}
+    const opts = typeof binding.value === "string" ? { content: binding.value } : binding.value || {}
 
     if (el.getAttribute('title') && !opts.content) {
       opts.content = el.getAttribute('title')