Tooltip 文字提示

用于解释图标按钮、缩略文本或状态。

首选方向与对侧空间均不足时隐藏气泡。Teleport 不会超出宿主视图边界。

基础用法

<template>
  <div class="tooltip-demo">
    <AuTooltip
      v-for="item in tooltipItems"
      :key="item.placement"
      :content="item.content"
      :placement="item.placement"
      :show-after="item.showAfter"
    >
      <AuButton>{{ item.placement }}</AuButton>
    </AuTooltip>
    <AuTooltip placement="top">
      <AuButton type="primary">使用内容插槽</AuButton>
      <template #content>
        <strong>自定义内容</strong><br />支持任意可信模板
      </template>
    </AuTooltip>
  </div>
</template>
<script setup>
import { AuButton, AuTooltip } from 'aurora-plus';
const tooltipItems = [
  { placement: 'top', content: '显示在目标上方', showAfter: 100 },
  { placement: 'right', content: '显示在目标右侧', showAfter: 100 },
  { placement: 'bottom-start', content: '下方并与起点对齐', showAfter: 100 },
  { placement: 'left-end', content: '左侧并与终点对齐', showAfter: 100 },
];
</script>
<style scoped>
.tooltip-demo {
  display: flex;
  align-items: center;
  min-height: 120px;
  flex-wrap: wrap;
  gap: 14px;
}
</style>

Tooltip API

Attributes

属性	说明	类型	默认值
content	提示文本；有 content 插槽时作为回退内容	string / number	''
placement	首选方向与对齐方式	AuTooltipPlacement	top
offset	提示层与目标的距离，单位 px	number	10
showAfter	显示延迟，单位 ms	number	220
hideAfter	隐藏延迟，单位 ms	number	80
disabled	是否禁用提示	boolean	false
fillTrigger	触发区域是否填满父容器高度	boolean	false
maxWidth	最大宽度；数字会转换为 px	string / number	280
teleported	是否传送到 appendTo	boolean	true
appendTo	Teleport 目标	string / HTMLElement	body

Events

事件名	说明	参数
open	显示延迟结束后、气泡挂载前触发；宿主可据此扩展视图	—
closed	气泡退场结束或组件卸载后触发；挂载前取消也会释放打开状态	—

Slots

插槽名	说明
default	触发提示的内容区域
content	自定义提示内容

Exposes

方法	说明
show()	按 showAfter 延迟显示提示
hide()	按 hideAfter 延迟隐藏提示
updatePosition()	立即重新计算提示层位置