Tooltip 文字提示

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

基础用法

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

<script setup>
import KTooltip from "@/components/Tooltip/Tooltip.vue";
import KButton from "@/components/Button/Button.vue";
</script>
<template>
  <div>
    <k-tooltip placement="top" transition="fade" content="hello tooltip">
      <template #default>
        <k-button type="info">Tooltip按钮</k-button>
      </template>
    </k-tooltip>
  </div>
</template>

不同位置

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

<script setup>
import { ref } from "vue";
import KTooltip from "@/components/Tooltip/Tooltip.vue";
import KButton from "@/components/Button/Button.vue";
const trigger = ref("hover");
</script>
<template>
  <div class="flex flex-row">
    <k-tooltip
      placement="top"
      ref="tooltipRef"
      :trigger="trigger"
      transition="fade"
    >
      <template #default>
        <k-button type="info">Tooltip按钮top</k-button>
      </template>
      <template #content>
        <div>这是tooltip内容</div>
      </template>
    </k-tooltip>

    <k-tooltip
      placement="right"
      ref="tooltipRef"
      :trigger="trigger"
      transition="fade"
    >
      <template #default>
        <k-button type="info">Tooltip按钮right</k-button>
      </template>
      <template #content>
        <div>这是tooltip内容</div>
      </template>
    </k-tooltip>

    <k-tooltip
      placement="bottom"
      ref="tooltipRef"
      :trigger="trigger"
      transition="fade"
    >
      <template #default>
        <k-button type="info">Tooltip按钮bottom</k-button>
      </template>
      <template #content>
        <div>这是tooltip内容</div>
      </template>
    </k-tooltip>

    <k-tooltip
      placement="left"
      ref="tooltipRef"
      :trigger="trigger"
      transition="fade"
    >
      <template #default>
        <k-button type="info">Tooltip按钮left</k-button>
      </template>
      <template #content>
        <div>这是tooltip内容</div>
      </template>
    </k-tooltip>
  </div>
</template>
<style scoped>
.vk-button {
  margin-right: 20px;
}
</style>

触发方式

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

<script setup>
import KTooltip from "@/components/Tooltip/Tooltip.vue";
import KButton from "@/components/Button/Button.vue";
</script>
<template>
  <div>
    <k-tooltip
      placement="bottom"
      trigger="click"
      transition="fade"
      content="hello tooltip"
    >
      <template #default>
        <k-button type="info">Tooltip按钮</k-button>
      </template>
    </k-tooltip>
  </div>
</template>

更多内容的文字提示

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

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

<script setup>
import KTooltip from "@/components/Tooltip/Tooltip.vue";
import KButton from "@/components/Button/Button.vue";
</script>
<template>
  <div>
    <k-tooltip placement="bottom" transition="fade">
      <template #default>
        <k-button type="info">Tooltip按钮</k-button>
      </template>
      <template #content>
        <div>title</div>
        <div>这是tooltip内容</div>
      </template>
    </k-tooltip>
  </div>
</template>

手动触发

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

<script setup>
import { ref } from "vue";
import KTooltip from "@/components/Tooltip/Tooltip.vue";
import KButton from "@/components/Button/Button.vue";
const tooltipRef = ref();
const open = () => {
  tooltipRef.value?.show();
};
const close = () => {
  tooltipRef.value?.hide();
};
</script>
<template>
  <div class="mb-4">
    <k-button type="primary" @click="open">打开</k-button>
    <k-button type="error" @click="close">关闭</k-button>
  </div>

  <div>
    <k-tooltip
      placement="bottom"
      ref="tooltipRef"
      transition="fade"
      manual
      content="hello tooltip"
    >
      <template #default>
        <k-button type="info">Tooltip按钮</k-button>
      </template>
    </k-tooltip>
  </div>
</template>

API

Attributes

Name	Description	Type	Default
content	display content, can be overridden by slot#content	string	''
placement	position of Tooltip	enum- 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	bottom
open-delay	delay of appearance, in millisecond	number	0
close-delay	delay of disappear, in millisecond	number	200
trigger	How should the tooltip be triggered (to show)	enum-'hover' | 'click'	hover
manual	是否开启手动触发模式	boolean	false
transition	transition name	string	''
offsets	偏移量	number	9

Events

Name	Description	Type
visible-change	当 tooltip 展示/隐藏时被触发	boolean
click-outside	当点击到 Tooltip 外侧区域时被触发	boolean

Slots

Name	Description
default	Tooltip triggering & reference element
content	customize content

Exposes

Name	Description	Type
show	expose show function	Function(event?: Event | undefined) => void
hide	expose hide function	Function(event?: Event | undefined) => void