组件

Tooltip 文字提示

文字提示气泡框,当鼠标悬浮时出现 API文档 组件问题反馈和讨论

基本样式 #

最基本的用法,只要将想要提示的节点添加class样式"nv-tooltip",同时添加对应提示文本属性data-tip-text='Here is the content...',即可展现默认形式
<code>
prompt text…

Mouseover Here...

显示代码

不同的展示位置 #

位置有12个方向
<code>
显示代码

自定义文字内容 #

展示多行文本
<code>

Here is the content...Here is the content...Here is the content...

显示代码

可以自定义事件 #

通过修改属性data-tip-event为"click",即可点击出现提示。建议属性选择有"hover"(默认)和"click"事件,同时支持其他事件
<code>

Click 事件名称,点击后生效

显示代码

节点属性 #

如下属性生效,请现在对应的节点添加样式"nv-tooltip",同时在节点上添加如下属性即可
属性
类型(是否必要)
描述
data-tip-text
string (必填)
提示信息内容
data-tip-event
string (选填)
"hover"(默认),"click"两种事件,同时也可以添加其他事件触发提示信息
data-tip-position
string (选填)
"tl","top"(默认),"tr","rt","right","rb","br","bottom","bl","lb","left","lt",12种位置
data-tip-maxwidth
string (选填)
提示信息的最大宽度设置,默认是250像素,data-tip-maxwidth='250'
data-tip-cache
string (选填)
是否使用缓存,默认是"true",使用缓存。如果设置"false"则不使用缓存