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();