使用 tippy.vue 套件產生提示視窗

安裝套件

    
npm install vue-tippy@v6
    

使用示範

滑鼠游標移動到 button 上時顯示「這是一個按鈕」的提示訊息

    
<script setup lang="ts">
import {Tippy} from 'vue-tippy'
</script>

<template>

  <Tippy content="這是一個按鈕">
    <button>按鈕</button>
  </Tippy>

</template>
    

調整預設位置

可以使用 placement 參數調整提示視窗出現的位置選項有：top, bottom, left, right ，預設為 top。

如果指定位置為 top，但是空間不足則會出現在 bottom，
如果指定位置為 left，但是空間不足則會出現在 right，

    
  <Tippy content="這是一個按鈕" placement="top">
    <button>按鈕 t</button>
  </Tippy>
    

參考資料：
GitHub - kabbouchi/vue-tippy
VueTippy
Tippy.js
GitHub - atomiks/tippyjs
Floating UI
GitHub - floating-ui/floating-ui