§ Tooltip 文字提示

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

基础用法

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

主题

Tooltip 组件提供了两个不同的主题:dark和light。
显示代码

更多 Content

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

除了这些基本设置外,还有一些属性可以让使用者更好的定制自己的效果:

transition 属性可以定制显隐的动画效果,默认为fade-in-linear。 如果需要关闭 tooltip 功能,disabled 属性可以满足这个需求,它接受一个Boolean,设置为true即可。

事实上,这是基于 Vue-popper 的扩展,你可以自定义任意 Vue-popper 中允许定义的字段。 当然 Tooltip 组件实际上十分强大,文末的API文档会做一一说明。

高级扩展

显示代码

TIP

tooltip 内不支持 router-link 组件,请使用 vm.$router.push 代替。

tooltip 内不支持 disabled form 元素,参考MDN,请在 disabled form 元素外层添加一层包裹元素。

Attributes

最后更新于: 4/15/2022, 2:41:22 PM