<#def title = "提示框"/> <#def keyword = "ZhiqimUI"/> <#def desc = " 提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。"/> <#def prevUrl = "stepbar.htm"/> <#def nextUrl = "dropdown.htm"/> ${zhiqim_com_header()} ${zhiqim_com_topnav()}

${zhiqim_com_ui("tutorial", "ui", "nav", "tooltip")}

${zhiqim_com_breadcrumb("文库", "教程", "提示框")}

<#-- 标题 -->

提示框：

提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。

<#-- 一、鼠标移入事件 -->

一、鼠标移入事件，文本下方显示提示框

类型	效果预览	代码
靠左对齐	移动鼠标到我上面
居中对齐	移动鼠标到我上面
靠右对齐	移动鼠标到我上面

<#-- 二、鼠标移入事件 -->

二、鼠标移入事件，文本上方显示提示框（边框红色）

类型	效果预览	代码
靠左对齐	移动鼠标到我上面
居中对齐	移动鼠标到我上面
靠右对齐	移动鼠标到我上面

<#-- 三、鼠标移入事件 -->

三、鼠标移入事件，文本右方显示提示框（无箭头，无边框，默认宽度）

文本右方显示提示框（无箭头，无边框，默认宽度）
类型	效果预览	代码
靠上对齐	移动鼠标到我上面
居中对齐	移动鼠标到我上面
靠下对齐	移动鼠标到我上面

<#-- 四、鼠标移入事件 -->

四、鼠标移入事件，文本左方显示提示框（背景红色，字白色）

文本左方显示提示框（背景红色，字白色）
类型	效果预览	代码
靠上对齐	移动鼠标到我上面
居中对齐	移动鼠标到我上面
靠下对齐	移动鼠标到我上面

<#-- 五、点击事件 -->

五、点击事件，文本下方显示提示框

类型	效果预览	代码
靠左对齐	点击我打开，点其他地方关闭
居中对齐	点击我打开，点其他地方关闭
靠右对齐	点击我打开，点其他地方关闭

<#-- 六、点击事件 -->

六、点击事件，文本下方显示提示框

类型	效果预览	代码
指定data-id修改：	点击我打开，点其他地方关闭

<#-- 七、输入控制事件 -->

七、输入控制事件

类型	效果预览	代码
靠左对齐	小于5提示，>=5关闭
居中对齐	小于5提示，>=5关闭
靠右对齐	小于5提示，>=5关闭

${zhiqim_com_chapter()}

${zhiqim_com_footer()}