• Tooltip 文字提示
    • 基础用法
    • 主题
    • 更多 Content
    • 高级扩展
    • Attributes

    Tooltip 文字提示

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

    基础用法

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

    Tooltip 文字提示 - 图1

    主题

    Tooltip 组件提供了两个不同的主题：dark和light。

    Tooltip 文字提示 - 图2

    更多 Content

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

    Tooltip 文字提示 - 图3

    高级扩展

    除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：transition属性可以定制显隐的动画效果，默认为fade-in-linear。如果需要关闭tooltip功能，disabled属性可以满足这个需求，它接受一个Boolean，设置为true即可。

    Tooltip 文字提示 - 图4

    Attributes

    参数说明类型可选值默认值
    effect默认提供的主题Stringdark, lightdark
    content显示的内容String/Node——
    placementTooltip 的出现位置Stringtop, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-endbottom
    visible状态是否可见Boolean—false
    disabledTooltip 是否可用Boolean—false
    transition定义渐变动画String—fade-in-linear
    visibleArrow是否显示 Tooltip 箭头Boolean—true
    openDelay延迟出现，单位毫秒Number—0
    manual手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效Booleantrue,falsefalse