V3 Element

Appearance

On this page

Tooltip 文字提示 ​

常用于展示鼠标 hover 时的提示信息。

基础用法 ​

使用 content 属性来决定 hover 时的提示信息。

<template>
  <div class="basic block">
    <vk-tooltip content="hello tooltip">
      <vk-button>激活 Tooltip</vk-button>
    </vk-tooltip>
  </div>
</template>

不同位置 ​

由 placement 属性决定展示效果： placement 属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空

<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <vk-tooltip content="Top Left prompts info" placement="top-start">
        <vk-button>top-start</vk-button>
      </vk-tooltip>
      <vk-tooltip content="Top Center prompts info" placement="top">
        <vk-button>top</vk-button>
      </vk-tooltip>
      <vk-tooltip content="Top Right prompts info" placement="top-end">
        <vk-button>top-end</vk-button>
      </vk-tooltip>
    </div>
    <div class="row">
      <vk-tooltip content="Left Top prompts info" placement="left-start">
        <vk-button>left-start</vk-button>
      </vk-tooltip>
      <vk-tooltip content="Right Top prompts info" placement="right-start">
        <vk-button>right-start</vk-button>
      </vk-tooltip>
    </div>
    <div class="row">
      <vk-tooltip content="Left Center prompts info" placement="left">
        <vk-button class="mt-3 mb-3">left</vk-button>
      </vk-tooltip>
      <vk-tooltip content="Right Center prompts info" placement="right">
        <vk-button>right</vk-button>
      </vk-tooltip>
    </div>
    <div class="row">
      <vk-tooltip content="Left Bottom prompts info" placement="left-end">
        <vk-button>left-end</vk-button>
      </vk-tooltip>
      <vk-tooltip content="Right Bottom prompts info" placement="right-end">
        <vk-button>right-end</vk-button>
      </vk-tooltip>
    </div>
    <div class="row center">
      <vk-tooltip content="Bottom Left prompts info" placement="bottom-start">
        <vk-button>bottom-start</vk-button>
      </vk-tooltip>
      <vk-tooltip content="Bottom Center prompts info" placement="bottom">
        <vk-button>bottom</vk-button>
      </vk-tooltip>
      <vk-tooltip content="Bottom Right prompts info" placement="bottom-end">
        <vk-button>bottom-end</vk-button>
      </vk-tooltip>
    </div>
  </div>
</template>

<style>
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
</style>

触发方式 ​

由 trigger 属性决定触发方式： hover | click, 默认为 hover

<template>
  <div class="basic block">
    <vk-tooltip content="hello tooltip" trigger="click">
      <vk-button>点击激活 tooltip</vk-button>
    </vk-tooltip>
  </div>
</template>

更多内容的文字提示 ​

展示多行文本或者是设置文本内容的格式

用具名 slot content，替代 tooltip 中的 content 属性。

<template>
  <div class="basic block">
    <vk-tooltip trigger="click">
      <vk-button>复杂 HTML 结构的 tooltip</vk-button>
      <template #content>
        <h3>this is the title</h3>
        <p>this is the content</p>
      </template>
    </vk-tooltip>
  </div>
</template>

手动触发 ​

将 manual 属性设置为 true 即可， 然后可以使用实例上面的 show 和 hide 方法打开关闭下拉菜单。



<template>
  <div class="basic block">
    <vk-tooltip content="hello tooltip" ref="tooltipRef" manual>
      <vk-button>手动容器</vk-button>
    </vk-tooltip>

    <br />
    <br />
    <vk-button type="primary" @click="open">点击手动触发显示</vk-button>
    <vk-button type="danger" @click="close">点击手动触发隐藏</vk-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tooltipRef = ref();
const open = () => {
  tooltipRef.value?.show();
};
const close = () => {
  tooltipRef.value?.hide();
};
</script>

API ​

属性 ​

属性名说明类型默认值
content显示的内容，也可被 slot#content 覆盖string-
placementTooltip 组件出现的位置enum - 'top'| 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'bottom
transition动画名称stringfade
popper-optionspopper.js 参数object 请参考 popper.js 文档{}
trigger如何触发 Tooltipenum - 'hover'| 'click'hover
open-delay在触发后多久显示内容，单位毫秒number50
close-delay延迟关闭，单位毫秒number50
manual是否开启手动触发模式booleanfalse

事件 ​

事件名描述类型
visible-change当 tooltip 展示/隐藏时被触发(value: boolean) => void

插槽 ​

插槽名说明
defaultTooltip 触发 & 引用的元素
content自定义内容

实例 ​

名称说明类型
show按钮 show 方法() => void
hide按钮 hide 方法() => void