VueTippy component is not a popup

[crystalfp]

I'm using VueTippy with great satisfaction. Thanks! Now I'm trying to use it as a component to investigate if it could be used as a popup notification. Maybe it is a bad idea, but just to experiment with Tippy as a component. The following code from the documentations renders the Tippy content flat at the same level of the button. Obviously clicking on the X button does nothing because I use a v-if instead of something from Tippy. What I'm missing?

script setup lang="ts">
import {ref} from "vue";
import {Tippy} from "vue-tippy";

const dialogVisible = ref(false);
</script>

<template>
<button @click="dialogVisible=true">Push me</button>
<tippy v-if="dialogVisible"
    arrow
    interactive
    :hide-on-click="false"
>
  <template #default="{ state }">
    <div>
      <h1>Tippy!</h1>
      <p>{{ state }}</p>
    </div>
  </template>

  <template #content="{ hide }">
    Hi! <button @click="hide()">X</button>
  </template>
</tippy>
</template>

Seems not much documentation is devoted to the use as a component. Thanks! mario

[KABBOUCHI]

u can replace hide() with dialogVisible = false, I don't know what you are trying to do, but if you can provide some examples will be able to help more, normaly trigger button should be inside #default slot

u can check https://github.com/KABBOUCHI/vue-tippy/tree/main/playground for more component examples

[crystalfp]

Thanks @KABBOUCHI ! I tried without success to create a codesandbox.io example for you but without success. Anyway, maybe I have the wrong expectations. I expect that the use of Tippy component and Tippy directives (that I use in my application) gives similar output: a little box on top of the button. Instead the content of the two slots is put next to the button as if the component was a simple . Don't worry too much. I was just trying to understand tippy as a component. I continue to use the convenient tippy as directive in my application.