提示弹层

示例

hover the text

don't show anything if content is empty
基础用法

使用Tooltip包裹需要展示提示的元素,使用content属性指定提示文本即可

由于Tooltip是一个宏函数,Intact下,会返回两个元素,所以不要当做模板的顶级元素,因为Intact模板只能返回一个元素,此时应该用一个元素将它包起来

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
提示弹层位置

使用position属性改变弹层位置,该属性值为对象,其中my指弹层,at指触发器。组件同时提供了4中快捷取值:left, right, top, bottom

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
触发方式

使用trigger指定触发方式,click点击触发,hover悬浮触发,默认为hover,在悬浮触发情况下,鼠标离开触发器,弹层就会消失,如果我们需要鼠标能离开触发器并悬浮在弹层上,需要添加canHover属性

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
自定义内容

使用content扩展点,可以自定义复杂的提示内容

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
确认提示层

给组件添加confirm属性,可以展示确认提示弹层。点击“确认”和“取消”按钮分别会触发okcancel事件。你还可以通过okTextcancelText属性指定按钮文案

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
value 提示弹层的展示隐藏状态,可用v-model进行双向绑定 Boolean false
trigger 触发方式,点击触发click, 悬浮触发hover "hover" | "click" "hover"
canHover 对于悬浮触发hover的方式,提示内容弹层是否在鼠标悬浮时仍然展示,默认鼠标离开触发元素弹层就会关闭 Boolean false
showArrow 弹层是否展示箭头 Boolean true
position 弹层的位置 "left" | "bottom" | "right" | "top" | Object {my: 'center bottom-10', at: 'center top'}
transition 弹层动画,默认只提供c-fade,你也可以传入任意自定义动画类型 String "c-fade"
class 样式名。特别说明:该属性会往内容弹出层上添加,vue下会同时往触发元素和弹层元素上添加 String | Object undefined
confirm 带“确认”和“取消”按钮的确认弹层 Boolean false
onText confirm模式下的“确认”按钮文案 String "确认"
cancelText confirm模式下的“取消”按钮文案 String "取消"
container 指定弹出提示内容追加的位置,默认:Dialog类型的组件会追加到Dialog中,其他会追加到body中。你可以传入函数返回一个DOM用来作为插入的容器,或者传入字符串用来给querySelector进行查询 Function | String undefined

事件

事件名 说明 参数
show 弹层展开事件 -
hide 弹层隐藏事件 -
ok confirm模式下,点击“确认”按钮触发 -
cancel confirm模式下,点击“取消”按钮触发 -