Tooltip 文字提示

鼠标悬停、点击或聚焦时显示提示信息，支持 12 个方向与箭头。

基础用法

默认 hover 触发，top 方向。

<my-tooltip content="这是提示文字">
  <my-button>悬停显示</my-button>
</my-tooltip>

带箭头

arrow 属性在提示框上添加一个指向触发元素的小三角箭头。

<my-tooltip content="带箭头的提示" arrow placement="top">
  <my-button>上方</my-button>
</my-tooltip>

位置

placement 支持 12 个方向，精确控制弹出位置。

<my-tooltip content="上方" placement="top" arrow />
<my-tooltip content="左上" placement="top-start" arrow />
<my-tooltip content="右上" placement="top-end" arrow />
<my-tooltip content="下方" placement="bottom" arrow />
<my-tooltip content="左侧" placement="left" arrow />
<my-tooltip content="右侧" placement="right" arrow />

自定义触发

通过 trigger 和自定义 #content 插槽实现头像、在线状态等触发方式。

在线

<!-- 头像 -->
<my-tooltip placement="bottom" arrow>
  <img src="/images/icon.png" class="avatar" />
  <template #content>
    <div class="user-card">
      <img src="/images/icon.png" class="avatar-sm" />
      <div>
        <div>努尔顿</div>
        <div>nuerdun@my-ui.com</div>
      </div>
    </div>
  </template>
</my-tooltip>

<!-- 在线状态 -->
<my-tooltip placement="top" arrow>
  <span class="status-badge">
    <span class="dot-blue"></span>在线
  </span>
  <template #content>
    <div>当前状态：在线</div>
  </template>
</my-tooltip>

<!-- 帮助图标 -->
<my-tooltip trigger="click">
  <div class="help-icon"><HelpIcon /></div>
  <template #content>帮助信息</template>
</my-tooltip>

组件结构

根元素 .my-tooltip 包裹触发元素（默认插槽），弹出层 .my-tooltip__popup 通过 <transition> 控制显隐，内含提示内容和可选箭头。

CSS 类名

类名	说明
.my-tooltip	根元素
.my-tooltip__popup	弹出气泡
.my-tooltip__popup.is-arrow	显示箭头
.my-tooltip__arrow	箭头元素
.my-tooltip--top	上方弹出
.my-tooltip--top-start	上左弹出
.my-tooltip--top-end	上右弹出
.my-tooltip--bottom	下方弹出
.my-tooltip--bottom-start	下左弹出
.my-tooltip--bottom-end	下右弹出
.my-tooltip--left	左侧弹出
.my-tooltip--left-start	左上弹出
.my-tooltip--left-end	左下弹出
.my-tooltip--right	右侧弹出
.my-tooltip--right-start	右上弹出
.my-tooltip--right-end	右下弹出

API

Tooltip Props

属性	说明	类型	默认值
content	提示内容	string	—
placement	弹出位置（12 方向）	'top' | 'top-start' | ... | 'right-end'	'top'
trigger	触发方式	'hover' | 'click' | 'focus' | 'manual'	'hover'
arrow	是否显示箭头	boolean	false
modelValue / v-model	手动控制显示/隐藏	boolean	—
showDelay	显示延迟 (ms)	number	0
hideDelay	隐藏延迟 (ms)	number	0

Tooltip Slots

名称	说明
default	触发元素
content	自定义提示内容