提示

Tooltip 组件用于在元素上显示提示信息，是文本提示控制器，是基于 Drop 组件的视图 UI 包装。

UI Primitive

示例

点击展开查看详情

TypeScript
import { createTooltip } from 'vanilla-jui';

TypeScript
const tooltip = createTooltip(button, {  message: '保存成功后会自动同步',});

参数	类型	默认值	说明
`message`	`string`	`''`	提示文案，会 trim，不能为空
`mode`	`'click' \| 'hover'`	`'hover'`	触发方式
`position`	Drop position	`'auto'`	浮层位置，取值与 Drop 一致
`offset`	`number`	`8`	与目标元素间距
`theme`	`false \| 'reverse' \| 'primary' \| ...`	`false`	主题色，见下方说明
`cache`	`boolean`	`false`	透传给 Drop 的内容缓存开关
`ttl`	`number`	`0`	透传给 Drop 的缓存有效期，毫秒
`delay`	`number \| { show?: number, hide?: number }`	`100`	展示/隐藏延迟，单位毫秒
`hoverIntent`	`boolean`	`true`	hover 模式下启用意图判断
`name`	`string \| null`	`null`	提示名称，传给 Drop 和内容节点
`id`	`string \| null`	`null`	浮层 id，传给 Drop
`className`	`object`	见下表	覆盖 Tooltip 内容类名
`onShown`	`Function \| null`	`null`	Drop 展示后回调
`onHidden`	`Function \| null`	`null`	Drop 隐藏后回调

可选主题值：reverse、primary、success、warning、error。

属性	说明
`element`	底层 Drop 根节点；销毁后为 `null`
`drop`	底层 Drop 实例；销毁后为 `null`

同 Drop 实例方法。