TTooltip / 文字提示

Tooltip displays informational text when hovering over an element. Supports four directions, delay control, and auto-flip positioning via Floating UI. / 文字提示在悬停时显示信息文本，支持四个方向、延迟控制和 Floating UI 自动翻转定位。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
text	string	''	Tooltip text / 提示文字
placement	'top' | 'right' | 'bottom' | 'left'	'top'	Direction
disabled	boolean	false	Disabled
showDelay	number	100	Show delay (ms)
hideDelay	number	150	Hide delay (ms)

Events / 事件

Event	Description / 说明
@open	Tooltip shown
@close	Tooltip hidden

Slots / 插槽

Slot	Description / 说明
default	Trigger element / 触发元素

Basic Usage / 基础用法

<script setup lang="ts">
import { TTooltip } from '@gulcc/tabler-vue'
</script>

<template>
  <TTooltip text="This is a tooltip / 这是一个提示">
    <TButton color="primary">Hover me / 悬停</TButton>
  </TTooltip>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TTooltip } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Four directions / 四个方向 -->
  <div class="d-flex gap-2">
    <TTooltip text="Top / 上方" placement="top">
      <TButton size="sm">Top / 上</TButton>
    </TTooltip>
    <TTooltip text="Bottom / 下方" placement="bottom">
      <TButton size="sm">Bottom / 下</TButton>
    </TTooltip>
    <TTooltip text="Left / 左侧" placement="left">
      <TButton size="sm">Left / 左</TButton>
    </TTooltip>
    <TTooltip text="Right / 右侧" placement="right">
      <TButton size="sm">Right / 右</TButton>
    </TTooltip>
  </div>

  <!-- Custom delay / 自定义延迟 -->
  <TTooltip text="Delayed / 延迟显示" :show-delay="500" :hide-delay="300">
    <span class="cursor-pointer">Hover slowly / 慢速悬停</span>
  </TTooltip>

  <!-- Disabled / 禁用 -->
  <TTooltip text="Won't show" disabled>
    <TButton>Disabled / 禁用</TButton>
  </TTooltip>

  <!-- On icon / 图标上 -->
  <TTooltip text="Settings / 设置">
    <IconSettings class="cursor-pointer" />
  </TTooltip>
</template>

Tips / 避坑指南

• The text prop is the tooltip content — there is no content slot
• The default slot wraps the trigger element — tooltip shows on hover over this element
• Placement auto-flips when there isn't enough space (e.g., top flips to bottom)
• Uses <Teleport to="body"> — tooltip elements are rendered outside the current DOM tree
• Both showDelay and hideDelay are in milliseconds; defaults are 100ms show / 150ms hide