The tooltip pattern, demonstrated above, is normally found in-between a label and an input field. It's job is to provide more information about a particular field should the label not be enough.

The pattern allows a user to retrieve that content on demand, without it cluttering up the form. When hovered to, the tooltip content appears, and the tooltip content, once expanded, can also be pinned and moved as well.

<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>