Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

基础用法

在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。

使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果: placement属性值为:[方向]-[对齐位置];四个方向:top、left、right、bottom;三种对齐位置:start, end,默认为空。 如 placement="left-end",则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。

主题

Tooltip 组件内置了两个主题:dark和light。

通过设置 effect 来修改主题,默认值为 dark.

更多内容的文字提示

展示多行文本或者是设置文本内容的格式

用具名 slot content,替代tooltip中的content属性。

高级扩展

如果需要关闭 tooltip 功能,disabled 属性可以满足这个需求, 你只需要将其设置为 true。

显示 HTML 内容

内容属性可以设置为 HTML 字符串。

受控模式

Tooltip 可以通过父组件使用 visible 来控制它的显示与关闭。

虚拟触发

有时候我们想把 tooltip 的触发元素放在别的地方,而不需要写在一起,这时候就可以使用虚拟触发。

单例模式

Tooltip 可以作为单例,也就是是说你可以同时有多个触发同一个 tooltip 的触发元素,这个功能是在 虚拟触发 的基础上开发的。

SvelementUI footer