Appearance
Tooltip 文字提示
用于展示简短说明文字，适合图标按钮、截断文本等需要补充说明的场景。
示例
基础用法
自定义内容
API
Props
| 属性名 | 说明 | 类型 | 默认值 | 示例 |
|---|---|---|---|---|
| content | 提示内容 | string | '' | content="提示内容" |
| placement | 出现位置 | Placement | 'bottom' | placement="top" |
| disabled | 是否禁用 | boolean | false | disabled |
| visible | 手动控制显隐 | boolean | null | null | v-model:visible="visible" |
| offset | 偏移量 | number | - | :offset="12" |
| visible-arrow | 是否显示箭头 | boolean | true | :visible-arrow="false" |
| popper-options | Popper 配置 | Partial<Options> | {} | :popper-options="{ strategy: 'fixed' }" |
| show-after | 延迟显示时间，单位 ms | number | 0 | :show-after="200" |
| hide-after | 延迟关闭时间，单位 ms | number | 250 | :hide-after="100" |
| auto-close | 是否自动关闭 | boolean | true | :auto-close="false" |
| popper-class | 浮层类名 | string | object | array | '' | popper-class="custom-tooltip" |
| enterable | 鼠标是否可进入浮层 | boolean | true | :enterable="false" |
| effect | 主题 | 'light' | 'dark' | 'dark' | effect="light" |
| width | 内容宽度 | string | 'auto' | width="200px" |
Events
| 事件名 | 说明 | 回调参数 | 示例 |
|---|---|---|---|
| update:visible | 显隐状态变化时触发 | (visible: boolean) | @update:visible="onUpdate" |
Slots
| 插槽名 | 说明 | 作用域参数 | 示例 |
|---|---|---|---|
| default | 触发元素 | - | <template #default> |
| content | 自定义提示内容 | - | <template #content> |
Exposes
| 方法名 | 说明 | 类型 | 示例 |
|---|---|---|---|
| show | 显示提示 | () => void | tooltipRef.value?.show() |
| hide | 隐藏提示 | () => void | tooltipRef.value?.hide() |
注意事项
- Tooltip 内容应简短，不建议放置复杂交互。
- 对重要信息不要只依赖悬浮提示，应在界面中直接展示。