Home     About PeterBlum.com     Policies     Download a Licensed Product     Newsletter
Peter's Interactive Pages
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.&lt;br/&gt;&lt;b&gt;This tooltip takes advantage of HTML&lt;/b&gt;, unlike the standard tooltip.&lt;br /&gt;For example, this tooltip uses &lt;br&gt; tags to form linebreaks and the &lt;b&gt; 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.&lt;br /&gt;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>