DNN交互设计-提示Tooltips（九）

界面模式及使用

上图中展示了DNN的提示UI，通常提示信息的图标被放在一个标题以及输入框之间。它的作用就是为所编辑的字段除了标题之外提供更多的信息。

这种界面形式可以在客户需要时再显示帮助信息同时不会扰乱表单的布局。当鼠标移到蓝色图标时帮助信息就是以动态弹出div的方式出现。当提示内容显示出来后你还可以将帮助信息锁定在界面上，当然你也可以移动它。

HTML

<div class="dnnForm">
    <div class="dnnFormItem">
        <dnn:Label runat="server" ControlName="NameTextBox" Text="This is a label for a tooltip example" HelpText="Use this area to provide short, descriptive and helpful information for users" />
    </div>
</div>

<!-- ===================== 

You can also use the following markup for a standalone tooltip 

=======================-->

<div class="dnnTooltip">
    <label id="label" runat="server">
        <asp:LinkButton ID="cmdHelp" TabIndex="-1" runat="server" CausesValidation="False" EnableViewState="False" CssClass="dnnFormHelp">
            <asp:Label ID="lblLabel" runat="server" EnableViewState="False" />
        </asp:LinkButton>
        <asp:Label ID="lblNoHelpLabel" runat="server" EnableViewState="False" Visible="false" />
    </label>
    <asp:Panel ID="pnlHelp" runat="server" CssClass="dnnFormHelpContent dnnClear" EnableViewState="False" style="display:none;">
        <asp:Label ID="lblHelp" runat="server" EnableViewState="False" class="dnnHelpText" />
        <a href="#" class="pinHelp"></a>
    </asp:Panel>
</div>    

            

 

CSS

    
.dnnFormItem label,
.dnnFormItem .dnnFormLabel,
.dnnFormItem .dnnTooltip {
    display: block;
    width: 30%;
    text-align: right;
    margin-right: 16px;
    font-weight: bold;
    float: left;
    margin-top: 3px;
}
.dnnFormItem .dnnTooltip label {
    width: 100%;
    padding: 0;
    margin: 0;
}

 

jQuery

$('.dnnTooltip').dnnTooltip();