Tui

Tooltip 提示

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

基础用法

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

示例代码

vue

<template>
  <div class="component-card-demo-wrap">
    <TsTooltip trigger="click" content="点我就出来了" :placements="['top-center', 'right-center']">
      <TsButton>点击这里展示</TsButton>
    </TsTooltip>
    <TsTooltip trigger="hover" content="悬浮就出来了" :placements="['top-center', 'right-center']">
      <TsButton type="default">悬浮这里展示</TsButton>
    </TsTooltip>
  </div>
</template>

通过 slot 自定义内容

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

示例代码

vue

<template>
  <TsTooltip trigger="click" :placements="['top-center', 'right-center']">
    <template #content>
      <div style="width: 200px; height: 70px">
        <TsInput v-model="inputValue" placeholder="请输入内容" />
        <TsButton style="margin-top: 8px;">确定</TsButton>
      </div>
    </template>
    <TsButton type="primary">点这里</TsButton>
  </TsTooltip>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsInput } from 'tui';

const inputValue = ref('');
</script>

dark mode的显示

通过 effect="dark" 设置为 dark 模式。

示例代码

vue

<template>
  <div class="component-card-demo-wrap">
    <TsTooltip trigger="click" effect="dark" content="dark的内容显示" :placements="['top-center', 'right-center']">
      <TsButton>dark 的显示</TsButton>
    </TsTooltip>
  </div>
</template>

隐藏箭头

通过 arrow="false" 隐藏箭头。

示例代码

vue

<template>
  <div class="component-card-demo-wrap">
    <TsTooltip :arrow="false" content="隐藏箭头的效果" :placements="['top-center']">
      <TsButton>隐藏arrow的效果</TsButton>
    </TsTooltip>
  </div>
</template>

显示位置

通过 placement 设置显示位置。

示例代码

vue

<template>
  <div class="component-card-demo-wrap">
    <div class="placement-wrap">
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['left-start']">
        <TsButton type="default" class="left-start-position">left-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['left-center']">
        <TsButton type="default" class="left-center-position">left-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['left-end']">
        <TsButton type="default" class="left-end-position">left-end</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="top-start Text" :placements="['top-start']">
        <TsButton type="default" class="top-start-position">top-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['top-center']">
        <TsButton type="default" class="top-center-position">top-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['top-end']">
        <TsButton type="default" class="top-end-position">top-end</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['right-start']">
        <TsButton type="default" class="right-start-position">right-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['right-center']">
        <TsButton type="default" class="right-center-position">right-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['right-end']">
        <TsButton type="default" class="right-end-position">right-end</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['bottom-start']">
        <TsButton type="default" class="bottom-start-position">bottom-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['bottom-center']">
        <TsButton type="default" class="bottom-center-position">bottom-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['bottom-end']">
        <TsButton type="default" class="bottom-end-position">bottom-end</TsButton>
      </TsTooltip>
    </div>
  </div>
</template>
<style scoped>
.placement-wrap {
  position: relative;
  height: 200px;
  width: 560px;
  margin: auto;
}
.placement-wrap .ts-button {
  width: 105px;
}

.left-start-position {
  position: absolute;
  left: 0;
  top: 40px;
}

.left-center-position {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.left-end-position {
  position: absolute;
  left: 0;
  bottom: 40px;
}

.top-start-position {
  position: absolute;
  top: 0;
  left: 115px;
}

.top-center-position {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.top-end-position {
  position: absolute;
  top: 0;
  right: 115px;
}

.right-start-position {
  position: absolute;
  right: 0;
  top: 40px;
}

.right-center-position {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.right-end-position {
  position: absolute;
  right: 0;
  bottom: 40px;
}

.bottom-start-position {
  position: absolute;
  bottom: 0;
  left: 115px;
}

.bottom-center-position {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-end-position {
  position: absolute;
  bottom: 0;
  right: 115px;
}
</style>

属性 Props

visible

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

boolean

false

arrow

是否显示箭头

boolean

true

added 0.5.8

effect

主题

string

light / dark

light

added 0.5.8

content

提示内容

string

trigger

触发方式

string

hover / click

hover

offset

偏移量

[number,number]

[0, 0]

gap

间距

number

placement

位置

string[]

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

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

showOnHover

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

boolean

false

deprecated 0.5.8

插槽 Slots

default

默认slot, tooltip 的触发元素

content

自定义内容slot

基础用法

通过 slot 自定义内容

dark mode的显示

隐藏箭头

显示位置

属性 Props

插槽 Slots