v-tooltip

介绍

v-tooltip 是一个 Vue 指令，用于为元素添加悬浮提示。它可以在鼠标悬停在元素上时显示一个提示框，提供更多的信息或解释。

基础用法

要使用 v-tooltip 指令，只需在元素上添加 v-tooltip 属性，并设置提示内容即可。

text：提示内容。
position：提示框的位置，可选值为 top、bottom、left、right，默认为 top。

代码示例

vue

<template>
  <div class="container">
    <a-space>
      <a-button
        type="primary"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{ text: '你好吗？ 我很好。', position: 'right' }"
      >
        《情书》
      </a-button>

      <a-button
        type="outline"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '世界上所有的生命都在微妙的平衡中生存。',
          position: 'top'
        }"
      >
        《狮子王》
      </a-button>

      <a-button
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '人的价值，不在于他得到什么，而是他可以给予别人什么。',
          position: 'bottom'
        }"
      >
        《被嫌弃的松子的一生》
      </a-button>
      <a-button
        type="dashed"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '你永远也不晓得自己有多喜欢一个人，除非你看见他和别的人在一起！',
          position: 'left'
        }"
      >
        《天使爱美丽》
      </a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { vTooltip, vRipple } from '@cp-vuedir/core'
</script>

<style scoped>
.container {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
}
</style>

自定义主题

使用 theme 属性可以自定义提示框的主题。

theme：提示框的主题，可选值为 light、dark，默认为 dark。

代码示例

vue

<template>
  <div class="container">
    <a-space>
      <a-button
        type="primary"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{ text: '你好吗？ 我很好。', position: 'right' }"
      >
        《情书》
      </a-button>

      <a-button
        type="outline"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '世界上所有的生命都在微妙的平衡中生存。',
          position: 'top'
        }"
      >
        《狮子王》
      </a-button>

      <a-button
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '人的价值，不在于他得到什么，而是他可以给予别人什么。',
          position: 'bottom'
        }"
      >
        《被嫌弃的松子的一生》
      </a-button>
      <a-button
        type="dashed"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '你永远也不晓得自己有多喜欢一个人，除非你看见他和别的人在一起！',
          position: 'left'
        }"
      >
        《天使爱美丽》
      </a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { vTooltip, vRipple } from '@cp-vuedir/core'
</script>

<style scoped>
.container {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
}
</style>

自定义延时

使用 showDelay 和 hideDelay 属性可以自定义提示框的显示和隐藏延时。

showDelay：提示框的显示和隐藏延时，单位为毫秒，默认为 300。
hideDelay：提示框的显示和隐藏延时，单位为毫秒，默认为 300。

代码示例

vue

<template>
  <div class="container">
    <a-space>
      <a-button
        type="primary"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{ text: '你好吗？ 我很好。', position: 'right' }"
      >
        《情书》
      </a-button>

      <a-button
        type="outline"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '世界上所有的生命都在微妙的平衡中生存。',
          position: 'top'
        }"
      >
        《狮子王》
      </a-button>

      <a-button
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '人的价值，不在于他得到什么，而是他可以给予别人什么。',
          position: 'bottom'
        }"
      >
        《被嫌弃的松子的一生》
      </a-button>
      <a-button
        type="dashed"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '你永远也不晓得自己有多喜欢一个人，除非你看见他和别的人在一起！',
          position: 'left'
        }"
      >
        《天使爱美丽》
      </a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { vTooltip, vRipple } from '@cp-vuedir/core'
</script>

<style scoped>
.container {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
}
</style>

自定义偏移量

使用 offset 属性可以自定义提示框的偏移量。

offset：提示框的偏移量，单位为像素，默认为 0。

代码示例

vue

<template>
  <div class="container">
    <a-space>
      <a-button
        type="primary"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{ text: '你好吗？ 我很好。', position: 'right' }"
      >
        《情书》
      </a-button>

      <a-button
        type="outline"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '世界上所有的生命都在微妙的平衡中生存。',
          position: 'top'
        }"
      >
        《狮子王》
      </a-button>

      <a-button
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '人的价值，不在于他得到什么，而是他可以给予别人什么。',
          position: 'bottom'
        }"
      >
        《被嫌弃的松子的一生》
      </a-button>
      <a-button
        type="dashed"
        shape="round"
        size="large"
        v-ripple
        v-tooltip="{
          text: '你永远也不晓得自己有多喜欢一个人，除非你看见他和别的人在一起！',
          position: 'left'
        }"
      >
        《天使爱美丽》
      </a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { vTooltip, vRipple } from '@cp-vuedir/core'
</script>

<style scoped>
.container {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
}
</style>

API

属性名	说明	类型	是否必选	默认值
text	提示框的内容	`string`	✓	-
position	提示框的位置，可选值为 'top'、'bottom'、'left'、'right'	`string`	○	top
theme	提示框的主题，可选值为 'light'、'dark'	`string`	○	dark
showDelay	提示框的显示延时，单位为毫秒	`number`	○	300
hideDelay	提示框的隐藏延时，单位为毫秒	`number`	○	300
offset	提示框的偏移量，单位为像素	`number`	○	-

v-tooltip ​

介绍 ​

基础用法 ​

自定义主题 ​

自定义延时 ​

自定义偏移量 ​

API ​

介绍

基础用法

自定义主题

自定义延时

自定义偏移量

API