ziqim/zhiqim_ui/document/tutorial/ui/nav/tooltip.htm

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

<script>
Z.onload(function()
{
    Z(".example").each(function(elem)
    {
        Z(elem).next("td > pre").html(Z(elem).htmlt());
    });
    
    Z.Tooltip.load();
});

function doKeyup(elem, param)
{
    if (elem.value < 5)
    {
        var tooltip = Z.Tooltip(elem, param);
        tooltip.$content.css("overflow-y", "auto");
        tooltip.$content.css("height", "50px");
    }
    else
    {
        Z.Tooltip.close(elem);
    }
}

function doUpdateTooltipText()
{
    Z("#t-updateTooltipText").find(".z-content").html("我被改成新的数据了");
}
</script>

<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "nav", "tooltip")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "提示框")}
<div class="content">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
    <p class="z-text-blue">提示框：</p>
    <p class="z-color-333" style="text-indent:38px;">
        提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。
    </p>
</div>

<#-- 一、鼠标移入事件 -->
<div class="tutorial title">一、鼠标移入事件，文本下方显示提示框</div>

<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
    <td width="15%">类型</td>
    <td width="20%">效果预览</td>
    <td width="*">代码</td>
</tr>
<tr>
    <td>靠左对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="align:left;top:10;width:200px;" 
       data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>居中对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="align:center;top:10;width:200px;" 
       data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>靠右对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="align:right;top:10;width:200px;" 
       data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>

<#-- 二、鼠标移入事件 -->
<div class="tutorial title">二、鼠标移入事件，文本上方显示提示框（边框红色）</div>

<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
    <td width="15%">类型</td>
    <td width="20%">效果预览</td>
    <td width="*">代码</td>
</tr>
<tr>
    <td>靠左对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:top;align:left;top:10;border-color:#ff0000;width:200px;" 
       data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>居中对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:top;align:center;top:10;border-color:#ff0000;width:200px;" 
       data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>靠右对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:top;align:right;top:10;border-color:#ff0000;width:200px;" 
       data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>

<#-- 三、鼠标移入事件 -->
<div class="tutorial title">三、鼠标移入事件，文本右方显示提示框（无箭头，无边框，默认宽度）</div>

<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr>
    <td class="text-cyan z-px16" colspan="3">文本右方显示提示框（无箭头，无边框，默认宽度）</td>
</tr>
<tr bgcolor="#f5f5f5">
    <td width="15%">类型</td>
    <td width="20%">效果预览</td>
    <td width="*">代码</td>
</tr>
<tr>
    <td>靠上对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:right;align:bottom;arrow:false;" 
       data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>居中对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:right;align:center;arrow:false;" 
       data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>靠下对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:right;align:top;arrow:false;" 
       data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>

<#-- 四、鼠标移入事件 -->
<div class="tutorial title">四、鼠标移入事件，文本左方显示提示框（背景红色，字白色）</div>

<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr>
    <td class="text-cyan z-px16" colspan="3">文本左方显示提示框（背景红色，字白色）</td>
</tr>
<tr bgcolor="#f5f5f5">
    <td width="15%">类型</td>
    <td width="20%">效果预览</td>
    <td width="*">代码</td>
</tr>
<tr>
    <td>靠上对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:left;align:top;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;" 
       data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>居中对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:left;align:center;top:10;color:#fff;border-color:#ff0000;background-color:#f00;width:200px;" 
       data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>靠下对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="placement:left;align:right;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;" 
       data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>

<#-- 五、点击事件 -->
<div class="tutorial title">五、点击事件，文本下方显示提示框</div>

<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
    <td width="15%">类型</td>
    <td width="20%">效果预览</td>
    <td width="*">代码</td>
</tr>
<tr>
    <td>靠左对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="event:click;align:left;top:10;width:200px;" 
       data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>居中对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="event:click;align:center;top:10;width:200px;" 
       data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>靠右对齐</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
       data-options="event:click;align:right;top:10;width:200px;" 
       data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>

<#-- 六、点击事件 -->
<div class="tutorial title">六、点击事件，文本下方显示提示框</div>

<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
    <td width="15%">类型</td>
    <td width="20%">效果预览</td>
    <td width="*">代码</td>
</tr>
<tr>
    <td>指定data-id修改：</td>
    <td class="example"><span class="z-pointer" data-role="z-tooltip" 
        data-id="t-updateTooltipText"
        data-options="event:click;align:left;top:10;width:200px;" 
        data-text="原本内容：提示内容显示在文本下面，有箭头，左对齐"
        onclick="Z('#t-updateTooltipText').find('.z-content').html('改成新内容：提示内容显示在文本下面，有箭头，左对齐');" >点击我打开，点其他地方关闭</span>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>

<#-- 七、输入控制事件 -->
<div class="tutorial title">七、输入控制事件</div>

<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
    <td width="15%">类型</td>
    <td width="25%">效果预览</td>
    <td width="*">代码</td>
</tr>
<tr>
    <td>靠左对齐</td>
    <td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30" 
        onkeyup="doKeyup(this, {event:'show', top:10, width:50, height:20, align:'left', text:'当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5'});">
        小于5提示，>=5关闭
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>居中对齐</td>
    <td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30" 
        onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'center', borderColor:'#ff0000', text:'当前值低于5'});">
        小于5提示，>=5关闭
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>靠右对齐</td>
    <td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30" 
        onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'right', color: '#fff', borderColor:'#f00', backgroundColor:'#f00', text:'当前值低于5'});">
        小于5提示，>=5关闭
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}