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"则不使用缓存
|