Tui

Tooltip 提示

提供文字提示功能，适用于鼠标悬停、点击等场景，用于辅助说明或展示补充信息。

基础用法

默认支持点击（click）和悬浮（hover）触发方式，并支持配置显示方向。

示例代码

vue

<template>
  <TsTooltip trigger="click" :showOnHover="true" content="点我就出来了" :placement="['top-center', 'right-center']">
    <span>点击这里展示</span>
  </TsTooltip>
  <TsTooltip trigger="hover" :showOnHover="true" content="悬浮就出来了" :placement="['top-center', 'right-center']">
    <span>悬浮这里展示</span>
  </TsTooltip>
</template>

通过 slot 自定义内容

通过 slot="content" 可自定义提示内容，支持任意 HTML 结构。

示例代码

vue

<template>
   <TsTooltip trigger="click" :placement="['top-center', 'right-center']">
      <template #content>
        <div>这里是自定义slot的展示内容</div>
      </template>
      <span>点这里</span>
    </TsTooltip>
</template>

属性 Props

visible

强制显示 tooltip，不依赖 hover 或 click 触发

Boolean

false

effect

主题

String

dark

content

提示内容

String

trigger

触发方式

String

hover/click

hover

showOnHover

只要鼠标 hover，就显示 tooltip，不考虑是否文本超出

Boolean

false

offset

偏移量

Object

[0, 0]

gap

间距

Number

placement

位置

Array

top-start/top-center/top-end/left-center/right-center/bottom-start/bottom-end/left-top/right-top/left-bottom/right-bottom

['top-start', 'top-center', 'top-end', 'left-center', 'right-center', 'bottom-start', 'bottom-end', 'left-top', 'right-top', 'left-bottom', 'right-bottom']

事件 Events

onChange

获取文件

File

插槽 Slots

content

自定义内容slot