2020-08-27 17:18:57 +08:00

7.9 KiB
Raw Blame History

pageClass
comp-page-class

Tooltip 文本提示

概述

文字提示气泡框在鼠标悬停时显示代替了系统的title提示。

代码示例

当鼠标经过这段文字时,会显示一个气泡框

最简单的用法。

当鼠标经过这段文字时会显示一个内容是html的气泡框

提示内容可以是html结构的字符串。

当鼠标经过这段文字时,会显示一个内容是询问的气泡框

提示内容是一个confirm框。

上左 上中 上右
左上 左中 左下
右上 右中 右下
下左 下中 下右

提供12个不同的方向显示Tooltip具体配置可查看API。

当鼠标经过这段文字时,会显示一个内容是组件的气泡框

提示内容可以是自定义的组件。

API

Props

属性 说明 类型 默认值
text 提示的内容 String null
html 提示的内容是html结构的字符串 String null
component 提示的内容是一个vue组件 Object 400
direction 提示的朝向相对于dom来说可选值有leftrighttopbottom String bottom
align 提示内容相对于dom的位置可选值有topbottomcenterrightleft String center
confirm 是否是询问模式 Boolean false
onOk 当询问模式时,点击确认按钮触发的函数 Function null
onCancel 当询问模式时,点击取消按钮触发的函数 Function null