Vue3 Tooltips 示範

有些內容需要更進階的提示，將滑鼠游標移動到指定的內容上面就會出現內容提示：

讓我們來寫寫看:

    
<template>
  <div class="tooltip-container" @mouseenter="showTip" @mouseleave="hideTip">
    <slot></slot> <!-- 用於顯示傳入的內容 -->
    <div class="tooltip-content" v-show="isShown" :style="tooltipStyle">
      {{ props.tip }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const props = defineProps({
  tip: null as any,
})

const isShown = ref(false);
const tooltipStyle = ref({}); // 提示訊息樣式

/**
 * 顯示提示訊息
 */
function showTip() {
  tooltipStyle.value = {opacity: 1, visibility: 'visible'}; // 當滑鼠移入時顯示提示
  isShown.value = true;
}

/**
 * 隱藏提示訊息
 */
function hideTip() {
  tooltipStyle.value = {opacity: 0, visibility: 'hidden'}; // 當滑鼠移出時隱藏提示
  isShown.value = false;
}
</script>

<style scoped>
.tooltip-container {
  display: inline-block;
  position: relative;
}

.tooltip-content {
  position: absolute;
  bottom: 100%; /* 這將使提示信息出現在元素上方 */
  visibility: hidden; /* 預設隱藏提示信息 */
  background-color: black; /* 黑底 */
  color: white; /* 白字 */
  padding: 5px; /* 內距 */
  border-radius: 3px;
  z-index: 1000;
  left: 50%; /* 調整為從原元素的中心點開始 */
  transform: translateX(-50%); /* 向左移動自身寬度的一半，以對齊原本內容的中心點 */
  white-space: nowrap; /* 防止文字換行 */
}

</style>

    

使用:

    
<template>
  這是一段文字，文字文字，
  <tool-tip tip="這是提示訊息">
    滑鼠游標停在這來查看提示
  </tool-tip>
</template>

<script setup lang="ts">
import ToolTip from './components/ToolTip.vue';
import {defineComponent} from "vue"; // 假設TipTool組件位於components目錄

defineComponent({
  TipTool: {
   'tool-tip': ToolTip
  },
});

</script>

    

不過使用者沒有辦法知道哪裡有提示，於是我們稍微加點 CSS，在文字下面顯示「...」，讓使用者知道這裡有東西

    
.tooltip-container {
  display: inline-block;
  position: relative;

  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: black;
}