Skip to content

提示 (Tooltip) ​

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

基础用法 ​

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

全局配置 ​

通过 HiConfigProvider 的 tooltip.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"提示位置:bottom、top、left、right、auto、top-left、top-right、bottom-left、bottom-right、left-top、left-bottom、right-top、right-bottom
triggerEventTriggerEvent"hover"触发方式:click、mousedown、dblclick、hover、contextmenu、focus、touch
offsetnumber8提示与触发元素间距(px)
disabledbooleanfalse是否禁用
popupAsstring | Component"div"提示层标签或组件
asstring"div"触发区域根节点标签名

Tooltip 插槽 ​

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