提示框

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

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