From a6c61fbeb8744cedf215791059991b9f5d288a1d Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Sun, 17 Jan 2021 13:27:54 +0200
Subject: [PATCH] pass tippy instance for the content slot and fix nested
 components

---
 package.json                            |   1 +
 playground/App.vue                      | 358 +---------------------
 playground/components/Button.vue        |  12 +
 playground/{ => components}/Counter.vue |   4 +-
 playground/components/Icon.vue          |  11 +
 playground/main.ts                      |  21 +-
 playground/pages/Index.vue              | 383 ++++++++++++++++++++++++
 playground/pages/NestedComponents.vue   |  40 +++
 src/components/Tippy.ts                 |  23 +-
 yarn.lock                               |   5 +
 10 files changed, 492 insertions(+), 366 deletions(-)
 create mode 100644 playground/components/Button.vue
 rename playground/{ => components}/Counter.vue (79%)
 create mode 100644 playground/components/Icon.vue
 create mode 100644 playground/pages/Index.vue
 create mode 100644 playground/pages/NestedComponents.vue

diff --git a/package.json b/package.json
index e38fc3d..3420e70 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "typescript": "^4.1.3",
     "vue": "^3.0.0",
     "vue-loader": "^16.0.0-beta.8",
+    "vue-router": "4",
     "webpack": "^4.44.1",
     "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.12",
diff --git a/playground/App.vue b/playground/App.vue
index bfa576a..f31019e 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -1,359 +1,9 @@
 <template>
-  <div>
-    <div>
-      <span class="font-semibold mr-4">Tippy Component + custom element target:</span>
-
-      <tippy
-        content="test"
-        to="#btn123"
-      ></tippy>
-
-      <button
-        id="btn123"
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-      >Hi</button>
-    </div>
-
-    <div>
-      <span class="font-semibold mr-4">Tippy Component:</span>
-
-      <tippy content="test">
-        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
-      </tippy>
-    </div>
-
-    <div class="mt-6">
-      <span class="font-semibold mr-4">Tippy Component with content slot:</span>
-
-      <tippy interactive>
-        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
-
-        <template #content>
-          <button
-            class="text-sm py-2 px-3 bg-gray-100 text-black rounded-lg"
-            @click="counter++"
-          >
-            Counter {{ counter }} (click to increase)
-          </button>
-        </template>
-      </tippy>
-    </div>
-
-    <div class="mt-6">
-      <span class="font-semibold mr-4">useTippy + callbacks(console.log):</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="button"
-      >My Button</button>
-    </div>
-    <div class="mt-6">
-      <span class="font-semibold mr-4">useTippy + h(tag) content:</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="button2"
-      >My Button 2</button>
-    </div>
-    <div class="mt-6">
-      <span class="font-semibold mr-4">useTippy + h (reactive) content:</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="button3"
-      >My Button 3</button>
-    </div>
-    <div class="mt-6">
-      <span class="font-semibold mr-4">useTippy + h(SFC) content:</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="button4"
-      >My Button 4</button>
-    </div>
-    <div class="mt-6">
-      <span class="font-semibold mr-4">useTippy + SFC content:</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="button5"
-      >My Button 5</button>
-    </div>
-    <div class="mt-6">
-      <span class="font-semibold mr-4">useTippy + reactive options:</span>
-      <button
-        class="mr-4 text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        @click="button6Inc"
-      >My Button 6 - Inc & Refresh</button>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="button6"
-      >My Button 6</button>
-    </div>
-
-    <div class="mt-6">
-      <span
-        ref="target7"
-        class="font-semibold mr-4"
-      >useTippy + triggerTarget:</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="button7"
-      >My Button 7</button>
-    </div>
-
-    <div class="mt-6">
-      <span class="font-semibold mr-4">Tippy component + change content and props realtime using component ref:</span>
-      <tippy
-        ref="tippyComponent1"
-        @create="log"
-        @hide="log"
-      >
-        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
-          Tippy Component + h(SFC) content
-        </button>
-      </tippy>
-    </div>
-
-    <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"
-        @tippyMount="() => log('v-tippy mounted')"
-        v-tippy="{ content: 'Hello ' +  counter}"
-      >Tippy directive</button>
-
-    </div>
-
-    <div class="mt-6 space-x-2">
-      <span class="font-semibold mr-4">Singleton tippy with a transition:</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="singleton1"
-      >singleton1</button>
-
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="singleton2"
-      >singleton2</button>
-
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        ref="singleton3"
-      >singleton3</button>
-    </div>
-
-    <div class="mt-6 space-x-2">
-      <span class="font-semibold mr-4">Singleton v-tippy with a transition:</span>
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        :ref="v => singletons.push(v)"
-        v-tippy="{content : 'Tooltip 1'}"
-      >singleton1</button>
-
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        :ref="v => singletons.push(v)"
-        v-tippy="{content : 'Tooltip 2'}"
-      >singleton2</button>
-
-      <button
-        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
-        :ref="v => singletons.push(v)"
-        v-tippy="{content : 'Tooltip 3'}"
-      >singleton3</button>
-    </div>
-  </div>
+    <router-view></router-view>
 </template>
 <script lang="ts">
-import {
-  defineComponent,
-  ref,
-  h,
-  computed,
-  reactive,
-  onMounted,
-  onUnmounted,
-  watch,
-} from 'vue'
-import { useSingleton, useTippy, TippyOptions, TippyComponent } from '../src'
-import Counter from './Counter.vue'
-
-function useMousePosition() {
-  const x = ref(0)
-  const y = ref(0)
-
-  function handler(e: MouseEvent) {
-    x.value = e.clientX
-    y.value = e.clientY
-  }
-
-  onMounted(() => {
-    window.addEventListener('mousemove', handler, false)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('mousemove', handler, false)
-  })
-
-  return {
-    x,
-    y,
-  }
-}
+import { defineComponent } from 'vue'
 export default defineComponent({
-  setup() {
-    const counter = ref<number>(0)
-
-    setInterval(() => counter.value++, 1000)
-
-    const button = ref<HTMLButtonElement>()
-    const button2 = ref<HTMLButtonElement>()
-    const button3 = ref<HTMLButtonElement>()
-    const button4 = ref<HTMLButtonElement>()
-    const button5 = ref<HTMLButtonElement>()
-    const button6 = ref<HTMLButtonElement>()
-    const button7 = ref<HTMLButtonElement>()
-    const target7 = ref<HTMLButtonElement>()
-
-    useTippy(button, {
-      content: 'Test',
-      onMount() {
-        console.log('here')
-      },
-    })
-
-    useTippy(button2, {
-      content: h('h1', 'hi'),
-    })
-
-    useTippy(button3, {
-      content: computed(() =>
-        h(
-          'button',
-          {
-            onClick: () => {
-              counter.value++
-            },
-          },
-          'Counter ' + counter.value
-        )
-      ),
-      showOnCreate: true,
-      interactive: true,
-    })
-
-    useTippy(button4, {
-      content: h(Counter),
-      interactive: true,
-      showOnCreate: true,
-    })
-    useTippy(button5, {
-      content: defineComponent(() => {
-        return () => h('p', 'Hellooooo')
-      }),
-      interactive: true,
-      showOnCreate: true,
-    })
-
-    const options = reactive<TippyOptions>({
-      content: '1',
-      sticky: true,
-      showOnCreate: true,
-      hideOnClick: false,
-      trigger: 'manual',
-    })
-
-    useTippy(button6, options)
-
-    const button6Inc = () => {
-      options.content = String(parseInt(options.content) + 1)
-    }
-
-    useTippy(target7, {
-      content: 'Triggered by button7',
-      placement: 'bottom',
-      triggerTarget: button7,
-    })
-
-    const { x, y } = useMousePosition()
-
-    const { tippy } = useTippy(() => document.body, {
-      content: computed(() => `(${x.value},${y.value})`),
-      showOnCreate: true,
-      trigger: 'manual',
-      // sticky: true, // slow?
-      placement: 'top',
-      hideOnClick: false,
-      arrow: `<svg style="color: black;width:20px;height:20px" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"></path></svg>`,
-      getReferenceClientRect: function() {
-        return {
-          width: 0,
-          height: 0,
-          top: y.value,
-          right: x.value,
-          bottom: y.value,
-          left: x.value,
-        }
-      },
-    })
-
-    watch([x, y], () => tippy.value?.popperInstance?.update())
-
-    const tippyComponent1 = ref<TippyComponent>()
-
-    onMounted(() => {
-      tippyComponent1.value?.setProps({
-        interactive: true,
-        offset: [0, 30],
-        placement: 'top',
-      })
-
-      tippyComponent1.value?.setContent(
-        h(Counter, {
-          initialValue: 42,
-        })
-      )
-    })
-
-    const singleton1 = ref()
-    const singleton2 = ref()
-    const singleton3 = ref()
-
-    const { tippy: tippySingleton1 } = useTippy(singleton1, {
-      content: 'Singleton 1',
-    })
-    const { tippy: tippySingleton2 } = useTippy(singleton2, {
-      content: 'Singleton 2',
-    })
-    const { tippy: tippySingleton3 } = useTippy(singleton3, {
-      content: 'Singleton 3',
-    })
-
-    useSingleton([tippySingleton1, tippySingleton2, tippySingleton3], {
-      placement: 'top',
-      moveTransition: 'transform 0.2s ease-out',
-    })
-    const singletons = ref([])
-
-    useSingleton(singletons, {
-      placement: 'top',
-      moveTransition: 'transform 0.2s ease-out',
-    })
-
-    return {
-      singleton1,
-      singleton2,
-      singleton3,
-      singletons,
-      counter,
-      button,
-      button2,
-      button3,
-      button4,
-      button5,
-      button6,
-      button6Inc,
-      button7,
-      target7,
-      tippyComponent1,
-      log: console.log,
-    }
-  },
+  
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/playground/components/Button.vue b/playground/components/Button.vue
new file mode 100644
index 0000000..d81b15d
--- /dev/null
+++ b/playground/components/Button.vue
@@ -0,0 +1,12 @@
+<template>
+  <button type="button" class="inline-flex text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
+    <ui-icon class="mr-2"></ui-icon>
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "UiButton",
+};
+</script>
\ No newline at end of file
diff --git a/playground/Counter.vue b/playground/components/Counter.vue
similarity index 79%
rename from playground/Counter.vue
rename to playground/components/Counter.vue
index e17b6e1..0a310b9 100644
--- a/playground/Counter.vue
+++ b/playground/components/Counter.vue
@@ -1,5 +1,7 @@
 <template>
-  <button @click="count++">{{ count }}</button>
+  <div>
+    <button @click="count++">{{ count }}</button>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/playground/components/Icon.vue b/playground/components/Icon.vue
new file mode 100644
index 0000000..ea63a40
--- /dev/null
+++ b/playground/components/Icon.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" />
+</svg>
+</template>
+
+<script>
+export default {
+  name: 'UiIcon',
+}
+</script>
\ No newline at end of file
diff --git a/playground/main.ts b/playground/main.ts
index e51762f..aa47d92 100644
--- a/playground/main.ts
+++ b/playground/main.ts
@@ -1,10 +1,29 @@
 // necessary for webpack
 ///<reference path="../src/global.d.ts"/>
 import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
 import VueTippy from '../src'
-
+import "tippy.js/dist/tippy.css";
 import App from './App.vue'
+import PageIndex from './pages/Index.vue'
+import PageNestedComponents from './pages/NestedComponents.vue'
+import Counter from './components/Counter.vue'
+import UiIcon from "./components/Icon.vue";
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes :[
+    { path: '/', component: PageIndex },
+    { path: '/nested-components', component: PageNestedComponents },
+  ]
+})
+
+
 const app = createApp(App)
+app.component('counter', Counter)
+app.component("ui-icon", UiIcon);
+
+app.use(router)
 app.use(VueTippy, {
   defaultProps: { placement: 'right' },
 })
diff --git a/playground/pages/Index.vue b/playground/pages/Index.vue
new file mode 100644
index 0000000..3c6dc9f
--- /dev/null
+++ b/playground/pages/Index.vue
@@ -0,0 +1,383 @@
+<template>
+  <div>
+    <div>
+      <span class="font-semibold mr-4">Tippy Component + custom element target:</span>
+
+      <tippy
+        content="test"
+        to="#btn123"
+      ></tippy>
+
+      <button
+        id="btn123"
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+      >Hi</button>
+    </div>
+
+    <div class="mt-6">
+      <span class="font-semibold mr-4">Tippy Component:</span>
+
+      <tippy content="test">
+        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
+      </tippy>
+    </div>
+
+    <div class="mt-6">
+      <span class="font-semibold mr-4">Tippy Component with content slot:</span>
+
+      <tippy interactive>
+        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
+
+        <template #content>
+          <button
+            class="text-sm py-2 px-3 bg-gray-100 text-black rounded-lg"
+            @click="counter++"
+          >
+            Counter {{ counter }} (click to increase)
+          </button>
+        </template>
+      </tippy>
+    </div>
+
+     <div class="mt-6">
+      <span class="font-semibold mr-4">Tippy Component with component content slot:</span>
+
+      <tippy interactive>
+        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
+
+        <template #content>
+          <counter/>
+        </template>
+      </tippy>
+    </div>
+
+
+     <div class="mt-6">
+        <span class="font-semibold mr-4">Tippy component + content slot data</span>
+      <tippy interactive :hideOnClick="false"> 
+         <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
+        <template #content="{ tippy }" class="relative">
+            <button class="absolute top-0 right-0 m-2 w-6 h-6 bg-white text-black rounded" @click="tippy && tippy.hide()">&times;</button>
+            <pre class="p-4">{{ tippy && tippy.state }}</pre>
+        </template>
+      </tippy>
+    </div>
+
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + callbacks(console.log):</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="button"
+      >My Button</button>
+    </div>
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + h(tag) content:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="button2"
+      >My Button 2</button>
+    </div>
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + h (reactive) content:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="button3"
+      >My Button 3</button>
+    </div>
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + h(SFC) content:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="button4"
+      >My Button 4</button>
+    </div>
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + SFC content:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="button5"
+      >My Button 5</button>
+    </div>
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + reactive options:</span>
+      <button
+        class="mr-4 text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        @click="button6Inc"
+      >My Button 6 - Inc & Refresh</button>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="button6"
+      >My Button 6</button>
+    </div>
+
+    <div class="mt-6">
+      <span
+        ref="target7"
+        class="font-semibold mr-4"
+      >useTippy + triggerTarget:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="button7"
+      >My Button 7</button>
+    </div>
+
+    <div class="mt-6">
+      <span class="font-semibold mr-4">Tippy component + change content and props realtime using component ref:</span>
+      <tippy
+        ref="tippyComponent1"
+        @create="log"
+        @hide="log"
+      >
+        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
+          Tippy Component + h(SFC) content
+        </button>
+      </tippy>
+    </div>
+
+    <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"
+        @tippyMount="() => log('v-tippy mounted')"
+        v-tippy="{ content: 'Hello ' +  counter}"
+      >Tippy directive</button>
+
+    </div>
+
+    <div class="mt-6 space-x-2">
+      <span class="font-semibold mr-4">Singleton tippy with a transition:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="singleton1"
+      >singleton1</button>
+
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="singleton2"
+      >singleton2</button>
+
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        ref="singleton3"
+      >singleton3</button>
+    </div>
+
+    <div class="mt-6 space-x-2">
+      <span class="font-semibold mr-4">Singleton v-tippy with a transition:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        :ref="v => singletons.push(v)"
+        v-tippy="{content : 'Tooltip 1'}"
+      >singleton1</button>
+
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        :ref="v => singletons.push(v)"
+        v-tippy="{content : 'Tooltip 2'}"
+      >singleton2</button>
+
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        :ref="v => singletons.push(v)"
+        v-tippy="{content : 'Tooltip 3'}"
+      >singleton3</button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  reactive,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue'
+import { useSingleton, useTippy, TippyOptions, TippyComponent } from '../../src'
+import Counter from '../components/Counter.vue'
+
+function useMousePosition() {
+  const x = ref(0)
+  const y = ref(0)
+
+  function handler(e: MouseEvent) {
+    x.value = e.clientX
+    y.value = e.clientY
+  }
+
+  onMounted(() => {
+    window.addEventListener('mousemove', handler, false)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('mousemove', handler, false)
+  })
+
+  return {
+    x,
+    y,
+  }
+}
+export default defineComponent({
+  setup() {
+    const counter = ref<number>(0)
+
+    setInterval(() => counter.value++, 1000)
+
+    const button = ref<HTMLButtonElement>()
+    const button2 = ref<HTMLButtonElement>()
+    const button3 = ref<HTMLButtonElement>()
+    const button4 = ref<HTMLButtonElement>()
+    const button5 = ref<HTMLButtonElement>()
+    const button6 = ref<HTMLButtonElement>()
+    const button7 = ref<HTMLButtonElement>()
+    const target7 = ref<HTMLButtonElement>()
+
+    useTippy(button, {
+      content: 'Test',
+      onMount() {
+        console.log('here')
+      },
+    })
+
+    useTippy(button2, {
+      content: h('h1', 'hi'),
+    })
+
+    useTippy(button3, {
+      content: computed(() =>
+        h(
+          'button',
+          {
+            onClick: () => {
+              counter.value++
+            },
+          },
+          'Counter ' + counter.value
+        )
+      ),
+      showOnCreate: true,
+      interactive: true,
+    })
+
+    useTippy(button4, {
+      content: h(Counter),
+      interactive: true,
+      showOnCreate: true,
+    })
+    useTippy(button5, {
+      content: defineComponent(() => {
+        return () => h('p', 'Hellooooo')
+      }),
+      interactive: true,
+      showOnCreate: true,
+    })
+
+    const options = reactive<TippyOptions>({
+      content: '1',
+      sticky: true,
+      showOnCreate: true,
+      hideOnClick: false,
+      trigger: 'manual',
+    })
+
+    useTippy(button6, options)
+
+    const button6Inc = () => {
+      options.content = String(parseInt(options.content) + 1)
+    }
+
+    useTippy(target7, {
+      content: 'Triggered by button7',
+      placement: 'bottom',
+      triggerTarget: button7,
+    })
+
+    const { x, y } = useMousePosition()
+
+    const { tippy } = useTippy(() => document.body, {
+      content: computed(() => `(${x.value},${y.value})`),
+      showOnCreate: true,
+      trigger: 'manual',
+      // sticky: true, // slow?
+      placement: 'top',
+      hideOnClick: false,
+      arrow: `<svg style="color: black;width:20px;height:20px" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"></path></svg>`,
+      getReferenceClientRect: function() {
+        return {
+          width: 0,
+          height: 0,
+          top: y.value,
+          right: x.value,
+          bottom: y.value,
+          left: x.value,
+        }
+      },
+    })
+
+    watch([x, y], () => tippy.value?.popperInstance?.update())
+
+    const tippyComponent1 = ref<TippyComponent>()
+
+    onMounted(() => {
+      tippyComponent1.value?.setProps({
+        interactive: true,
+        offset: [0, 30],
+        placement: 'top',
+      })
+
+      tippyComponent1.value?.setContent(
+        h(Counter, {
+          initialValue: 42,
+        })
+      )
+    })
+
+    const singleton1 = ref()
+    const singleton2 = ref()
+    const singleton3 = ref()
+
+    const { tippy: tippySingleton1 } = useTippy(singleton1, {
+      content: 'Singleton 1',
+    })
+    const { tippy: tippySingleton2 } = useTippy(singleton2, {
+      content: 'Singleton 2',
+    })
+    const { tippy: tippySingleton3 } = useTippy(singleton3, {
+      content: 'Singleton 3',
+    })
+
+    useSingleton([tippySingleton1, tippySingleton2, tippySingleton3], {
+      placement: 'top',
+      moveTransition: 'transform 0.2s ease-out',
+    })
+    const singletons = ref([])
+
+    useSingleton(singletons, {
+      placement: 'top',
+      moveTransition: 'transform 0.2s ease-out',
+    })
+
+    return {
+      singleton1,
+      singleton2,
+      singleton3,
+      singletons,
+      counter,
+      button,
+      button2,
+      button3,
+      button4,
+      button5,
+      button6,
+      button6Inc,
+      button7,
+      target7,
+      tippyComponent1,
+      log: console.log,
+    }
+  },
+})
+</script>
\ No newline at end of file
diff --git a/playground/pages/NestedComponents.vue b/playground/pages/NestedComponents.vue
new file mode 100644
index 0000000..6848ddb
--- /dev/null
+++ b/playground/pages/NestedComponents.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div style="margin-bottom: 20px">
+      <ui-button>Click me</ui-button>
+    </div>
+
+    <div style="margin-bottom: 20px">
+      <tippy>
+        <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg" type="button">Trigger</button>
+        <template #content> Working tooltip </template>
+      </tippy>
+    </div>
+
+    <div style="margin-bottom: 20px">
+      <tippy>
+        <ui-button>Trigger with icon</ui-button>
+        <template #content> Working tooltip </template>
+      </tippy>
+    </div>
+
+    <div style="margin-bottom: 20px">
+      <tippy interactive> 
+        <ui-button>Icon inside content</ui-button>
+        <template #content>
+            <ui-button>Button 1</ui-button>
+        </template>
+      </tippy>
+    </div>    
+  </div>
+</template>
+
+<script>
+import UiButton from "../components/Button.vue";
+export default {
+  name: "App",
+  components: {
+    UiButton,
+  },
+};
+</script>
diff --git a/src/components/Tippy.ts b/src/components/Tippy.ts
index 4123d66..a3c3f7d 100644
--- a/src/components/Tippy.ts
+++ b/src/components/Tippy.ts
@@ -1,4 +1,4 @@
-import { defineComponent, ref, h, ComponentObjectPropsOptions } from 'vue'
+import { defineComponent, ref, h, ComponentObjectPropsOptions, onMounted } from 'vue'
 import { TippyOptions } from '../types'
 import { useTippy } from '../composables'
 import tippy, { DefaultProps } from 'tippy.js'
@@ -55,6 +55,7 @@ const TippyComponent = defineComponent({
   props,
   setup(props, { slots }) {
     const elem = ref<Element>()
+    const contentElem = ref<Element>()
 
     let options = { ...props } as TippyOptions & {
       to: String | Element | null | undefined
@@ -63,12 +64,6 @@ const TippyComponent = defineComponent({
       delete options.to
     }
 
-    if (slots.content != null && typeof slots.content != 'undefined') {
-      options.content = {
-        render: () => slots.content!(),
-      }
-    }
-
     let target: any = elem
 
     if (props.to) {
@@ -80,12 +75,20 @@ const TippyComponent = defineComponent({
     }
 
     const tippy = useTippy(target, options)
-    return { elem, ...tippy }
+
+    onMounted(() => {
+      if(slots.content)
+        tippy.setContent(() => contentElem.value)
+    })
+
+    return { elem, contentElem, ...tippy }
   },
   render() {
     let slot = this.$slots.default ? this.$slots.default() : []
-
-    return h('span', { ref: 'elem' }, slot)
+    return h('span', { ref: 'elem' },  this.$slots.content ?[
+      slot,
+        h('span', { ref : 'contentElem' }, this.$slots.content({ tippy : this.tippy}))
+    ] : slot)
   },
 })
 
diff --git a/yarn.lock b/yarn.lock
index e76fa70..c57c52e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5820,6 +5820,11 @@ vue-loader@^16.0.0-beta.8:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
+vue-router@4:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
+  integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
+
 vue@^3.0.0:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"