拼图开发文档

提示框

提示框包含提示工具和弹出框两种。

需要在的元素上添加触发属性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>
  

参数说明

参数类型默认值参数值说明
typetexttipstips
popove
显示类型,可为空。
titletext//弹出框的标题,无此内容为提示工具。
contenttext//提示工具或弹出框的文本内容。
showstringtoptop
right
bottom
left
top: 上方显示
right: 右侧显示
bottom: 下文显示
left: 左侧显示