Floating VueでTooltipを作る

Vue3でtooltipやdropdownを作成できるライブラリFloating Vueを使う機会があり
マニュアル通りだと動かず困っていたところ、
cogorさんが助けてくれたので使い方のメモ書きを共有します。

Vue.js/Tooltip.vue

<template>
  <div class="flex items-start">
    <Tooltip :placement="placement" :triggers="[trigger]" :theme="tooltipStyle">
      <a>Sponsor me</a>
      <template #popper>
        Help me fund my Open Source work!
      </template>
    </Tooltip>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
import { Tooltip } from 'floating-vue'
import 'floating-vue/dist/style.css'

const props = defineProps({
    placement: {
      type: String as PropType<TooltipPlacement>,
      default: "top"
    },
    tooltipStyle: {
      type: String as PropType<TooltipStyle>,
      default: "tooltip-dark",
    },
    trigger: {
      type: String as PropType<TooltipTrigger>,
      default: "hover"
    }
})
</script>