Enhanced ToolTips
The browser provides the ToolTip to describe almost any field as the mouse passes
over it. That tooltip is very limited. For most browsers, it cannot be multiline.
It has one style (yellow). It cannot support HTML.
Using the same PopupView feature found in
DES’s Interactive Hints and the
DES Validator’s PopupErrorFormatter, DES gives you a better tooltip. You
control its appearance and supply it with HTML to convey the information better.
Here are its key features:
- Can be attached to almost any control.
- Appears as the mouse passes over a control. Is removed as the mouse leaves (after
a short delay). One difference from the browser’s tooltip is that the user can move
the mouse onto the tooltip and it will remain visible even though the mouse is outside
the control. This lets the text be visible without the mouse hiding a part of the
control.
- The PopupView element containing the tooltip text will does not overlap the control
(except in extreme circumstances). It positions itself to one side. If there isn’t
enough screen space for your preferred side, it chooses another side.
- Uses the PopupView feature from Interactive Hints which means:
- Style-sheet driven, allowing color and other appearance changes
- The text of the tooltip supports HTML formatting, which means you can embed graphics
- Add an image to the left of the message
- Supports Callouts (the little arrows pointing to the control)
- Draggable
- Optional title bar and close box
- With a single property setting, all DES controls and controls using the NativeControlExtender
can be switched to using PopupViews.
- If the browser does not support the scripts needed for the Popup ToolTip feature
or javascript is disabled, it scales down gracefully to using the standard browser
tooltip.
Demo
DES Enhanced TextBox:
Label:
This is a Label control with a ToolTip
ASP.NET Syntax for this demo
DES Enhanced TextBox:
<des:TextBox ID="TextBox1" runat="server"
ToolTip="DES's controls automatically convert the ToolTip property text into the Enhanced ToolTip.<br/><b>This tooltip takes advantage of HTML</b>, unlike the standard tooltip.<br />For example, this tooltip uses <br> tags to form linebreaks and the <b> tag to bold the second sentence."
ToolTipUsesPopupViewName="ToolTip-Medium" />
</p>
<p>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Native Checkbox" />
<des:NativeControlExtender ID="NativeControlExtender1" runat="server"
ToolTip="The native ASP.NET controls require the addition of DES's NativeControlExtender. Once assigned, you can use the ToolTip property on either the actual control or the NativeControlExtender."
ControlIDToExtend="CheckBox1" />
</p>
<p>
Label:
<asp:Label ID="Label1" runat="server">This is a Label control with a ToolTip</asp:Label>
</p>
<des:NativeControlExtender ID="NativeControlExtender2" runat="server"
ToolTip="This label also uses a ToolTip. Yet the ToolTip's appearance is different. You can define PopupViews in many ways, such as by color, size, positioning, and with or without callouts, titlebar, and closebox.<br />In this case, the PopupView is light blue, wide, and with a callout."
ControlIDToExtend="Label1" ToolTipUsesPopupViewName="LtBlue-Large" />
<des:PageManager ID="PageManager1" runat="server">
<HintManager ToolTipsAsHints="False" EnableToolTipsUsePopupViews="True" />
</des:PageManager>