Skip to content

提示 (Tooltip)

Tooltip 在悬停时显示简短提示。基于 Popover 实现,默认 triggerEvent="hover"

基础用法

使用 content 属性传入简单文本,或使用 #popup 插槽自定义内容。

全局配置

通过 HiConfigProvidertooltip.class 设置默认提示样式:

vue
<template>
  <hi-config-provider :tooltip="{ class: 'bg-gray-800 text-white px-2 py-1 rounded text-sm' }">
    <hi-tooltip content="提示">
      <button>悬停我</button>
    </hi-tooltip>
  </hi-config-provider>
</template>

Tooltip 参数

名称类型默认值说明
contentstring-简单文本提示内容
classClassType-提示层 class(会与全局 tooltip.class 合并)
placementPlacement"top"提示位置:bottomtopleftrightautotop-lefttop-rightbottom-leftbottom-rightleft-topleft-bottomright-topright-bottom
triggerEventTriggerEvent"hover"触发方式:clickmousedowndblclickhovercontextmenufocustouch
offsetnumber8提示与触发元素间距(px)
disabledbooleanfalse是否禁用
popupAsstring | Component"div"提示层标签或组件
asstring"div"触发区域根节点标签名

Tooltip 插槽

名称说明
default触发元素(被包裹的内容)
popup提示内容;提供时覆盖 content 属性