提示框
提示框包含提示工具和弹出框两种。
需要在的元素上添加触发属性data-click="tips"
(点击显示)或data-hover="tips"
(悬浮显示)及参数属性data-tips
(JSON数据)。
提示工具
提示工具为当鼠标点击或悬浮时,显示提示文本效果。
<button class="button bg-main" data-click="tips" data-tips='{"content":"左侧提示工具内容","show":"left"}'>左侧提示工具</button> <button class="button bg-main" data-hover="tips" data-tips='{"content":"顶部提示工具内容","show":"top"}'>顶部提示工具</button> <button class="button bg-main" data-click="tips" data-tips='{"content":"底部提示工具内容","show":"bottom"}'>底部提示工具</button> <button class="button bg-main" data-hover="tips" data-tips='{"content":"右侧提示工具内容","show":"right"}'>右侧提示工具</button>
弹出框
弹出框为当鼠标点击或悬浮时,显示弹出层标题及内容。
<button class="button bg-main" data-click="tips" data-tips='{"title":"弹出框","content":"左侧弹出框内容","show":"left"}'>左侧弹出框</button> <button class="button bg-main" data-hover="tips" data-tips='{"type":"popove","content":"顶部弹出框内容","show":"top"}'>顶部弹出框</button> <button class="button bg-main" data-click="tips" data-tips='{"type":"popove","content":"底部弹出框内容","show":"bottom"}'>底部弹出框</button> <button class="button bg-main" data-hover="tips" data-tips='{"title":"弹出框","content":"右侧弹出框内容","show":"right"}'>右侧弹出框</button>
参数说明
参数 | 类型 | 默认值 | 参数值 | 说明 |
---|---|---|---|---|
type | text | tips | tips popove | 显示类型,可为空。 |
title | text | / | / | 弹出框的标题,无此内容为提示工具。 |
content | text | / | / | 提示工具或弹出框的文本内容。 |
show | string | top | top right bottom left | top: 上方显示 right: 右侧显示 bottom: 下文显示 left: 左侧显示 |