Tooltip 文字提示

鼠标悬停/点击/聚焦时展示的简短文字提示，通过 Teleport 挂载到 body，支持自动翻转位置。

基础用法

四个方向的 Tooltip，鼠标悬停触发

vue

<script setup lang="ts">
import { ATooltip, AButton } from "@lite-code/aui-vue";
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center">
    <ATooltip title="提示文字（顶部）">
      <AButton>悬停查看 Top</AButton>
    </ATooltip>
    <ATooltip title="底部提示" placement="bottom">
      <AButton>Bottom</AButton>
    </ATooltip>
    <ATooltip title="左侧提示" placement="left">
      <AButton>Left</AButton>
    </ATooltip>
    <ATooltip title="右侧提示" placement="right">
      <AButton>Right</AButton>
    </ATooltip>
  </div>
</template>

触发方式

支持 hover / click / focus 三种触发方式

vue

<script setup lang="ts">
import { ATooltip, AButton, AInput } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
    <ATooltip title="悬停触发（默认）" trigger="hover">
      <AButton>Hover</AButton>
    </ATooltip>
    <ATooltip title="点击触发" trigger="click">
      <AButton>Click</AButton>
    </ATooltip>
    <ATooltip title="聚焦时显示提示" trigger="focus">
      <AInput placeholder="点击聚焦查看提示" style="width: 200px;" />
    </ATooltip>
  </div>
</template>

API

Props

属性	类型	默认值	说明
title	string	—	提示内容，为空时透传子元素
placement	TooltipPlacement	'top'	弹出方向（12 个方位）
trigger	TooltipTrigger	'hover'	触发方式：hover | click | focus
open	boolean	—	受控显示状态
defaultOpen	boolean	false	默认显示状态（非受控）
onOpenChange	(open: boolean) => void	—	显示状态变化回调
mouseEnterDelay	number	0.1	鼠标移入延迟（秒）
mouseLeaveDelay	number	0.1	鼠标移出延迟（秒）
color	string	—	自定义背景颜色
overlayClassName	string	—	弹层自定义 class
overlayStyle	object	—	弹层自定义样式

Slots

插槽	说明
default	触发元素

类型

type TooltipPlacement =
  | "top"
  | "topLeft"
  | "topRight"
  | "bottom"
  | "bottomLeft"
  | "bottomRight"
  | "left"
  | "leftTop"
  | "leftBottom"
  | "right"
  | "rightTop"
  | "rightBottom";
type TooltipTrigger = "hover" | "click" | "focus";