Peter's Interactive Pages

Interactive Hints

The Interactive Hints feature shows a hint as the user moves into a field. A hint provides a description to the user about the field they are in, such as the maximum number of characters allowed.

You must have a Suite or Peter's Interactive Pages license to use Interactive Hints.

Hints have three user interfaces:

Popup, using a PopupView. A PopupView is a messagebox with optional callout (like a help balloon) pointing to the data entry control. It can be dragged, closed on demand, show a title, show a "More button" to take several actions that give the user more help, and show any HTML you like in the message. See Demo 1 below.
Use a Panel or Label control on the page.
Use the browser's status bar.

Here are more features of the Hint system:

Interactive Hints can also be used as replacements to tooltips. The PopupView will appear when the mouse is over the control and disappear when the mouse leaves. The PopupView is very customizable and allows HTML as its content whereas the standard browser tooltip has a single look and only shows text.
DES's data entry controls have properties to quickly setup a hint.
You can attach a hint to most other data entry controls with the NativeControlExtender control. Just assign its ControlIDToExtend and Hint properties.
When the field showing the hint has a Validator error, you have the option of showing that error instead of or in addition to the hint text. You can also supply a style sheet that makes the error message appear differently from the hint text.

Demo 1: Popup Hints

These three textboxes have their own hint. In this setup, it only pops up when focus in the the textbox. You can also have it popup like a tooltip. You can extensively customize the appearance of the PopupView.

If you enter 'abc' into any of them, an error message will appear and be included into the hint Label.

Enter an integer
Enter an integer
Enter an integer

ASP.NET Syntax for this demo

<des:PageManager ID="PageManager1" runat="server">
   <HintManager HintsShowErrors="AllErrorsAndHint">
      <SharedHintFormatters>
         <des:HintFormatter Name="LtYellow-Small" PopupViewName="LtYellow-Small" InToolTip="False" />
         <des:HintFormatter Name="Blue" PopupViewName="AliceBlue-Small TopRightSidesAlign" />
         <des:HintFormatter Name="Red-NoCallout" PopupViewName="LtRed-Small" />
      </SharedHintFormatters>
   </HintManager>
</des:PageManager>
<des:TextBox ID="Demo1TextBox1" runat="server" 
   Hint="Enter your age" 
   HintHelp="Uses the default PopupView with a callout.&lt;br /&gt;Try dragging it. Notice how it switches to an opaque appearance."
   SharedHintFormatterName="LtYellow-Small" />
<des:DataTypeCheckValidator ID="Demo1DTCVal1" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo1TextBox1" ErrorMessage="Enter an integer" />
<br/>
<des:TextBox ID="Demo1TextBox2" runat="server"
   Hint="Enter the number of computers you own" 
   HintHelp="Uses a different color and initial position." 
   SharedHintFormatterName="Blue" />
<des:DataTypeCheckValidator ID="Demo1DTCVal2" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo1TextBox2" ErrorMessage="Enter an integer" />
<br/>
<des:TextBox ID="Demo1TextBox3" runat="server" 
   Hint="Enter the number of concerts you have seen in the last 12 months"
   HintHelp="Again uses a different color. Omits the callout." 
   SharedHintFormatterName="Red-NoCallout" />
<des:DataTypeCheckValidator ID="Demo1DTCVal3" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo1TextBox3" ErrorMessage="Enter an integer" />

Demo 2: Hints shown on the page in a Label control

Here are the same three textboxes with hints. All display the hint a single Label control positioned below the third textbox. Note that the status bar is showing the hint.

If you enter 'abc' into any of them, an error message will appear and be included into the hint Label.

Enter an integer
Enter an integer
Enter an integer

ASP.NET Syntax for this demo

<des:PageManager ID="PageManager1" runat="server">
   <HintManager HintsShowErrors="AllErrorsAndHint">
      <SharedHintFormatters>
         <des:HintFormatter Name="Demo2Formatter" HintControlID="Demo2HintControl1" DisplayMode="Static" 
            InStatusBar="True" InToolTip="False" />
      </SharedHintFormatters>
   </HintManager>
</des:PageManager>
<des:TextBox ID="Demo2TextBox1" runat="server" Hint="Enter your age" 
   SharedHintFormatterName="Demo2Formatter" />
<des:DataTypeCheckValidator ID="Demo2DTCVal1" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo2TextBox1" ErrorMessage="Enter an integer" />
<br/>
<des:TextBox ID="Demo2TextBox2" runat="server"
   Hint="Enter the number of computers you own" 
   SharedHintFormatterName="Demo2Formatter" />
<des:DataTypeCheckValidator ID="Demo2DTCVal2" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo2TextBox2" ErrorMessage="Enter an integer"/>
<br/>
<des:TextBox ID="Demo2TextBox3" runat="server"
   Hint="Enter the number of concerts you have seen in the last 12 months"
   SharedHintFormatterName="Demo2Formatter" />
<des:DataTypeCheckValidator ID="Demo2DTCVal3" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo2TextBox3" ErrorMessage="Enter an integer" />

Demo 3: Hint on the page in a Panel

Here are the same three textboxes from Demo 1 but using a panel to their right to show the hint text. The Panel has a limited width, forcing the hint to word wrap. The Validators have their ErrorFormatters changed to an image with alert box so they take up little space. The error message also appears with the hint.

To show an error, type 'abc' into any of these textboxes.

ASP.NET Syntax for this demo

<des:PageManager ID="PageManager1" runat="server">
   <HintManager HintsShowErrors="AllErrorsAndHint">
      <SharedHintFormatters>
         <des:HintFormatter Name="Demo3Formatter" HintControlID="Demo3HintControl1" DisplayMode="Static"
            InStatusBar="True" InToolTip="False" />
      </SharedHintFormatters>
   </HintManager>
</des:PageManager>
<table>
   <tr>
      <td>
         <des:TextBox ID="Demo3TextBox1" runat="server"
            Hint="Enter your age" SharedHintFormatterName="Demo3Formatter" />
         <des:DataTypeCheckValidator ID="Demo3DTCVal1" runat="server" DataType="Integer" 
            ControlIDToEvaluate="Demo3TextBox1" ErrorMessage="Enter an integer" >
            <ErrorFormatterContainer>
               <des:AlertImageErrorFormatter/>
            </ErrorFormatterContainer>
         </des:DataTypeCheckValidator>
         <br/>
         <des:TextBox ID="Demo3TextBox2" runat="server"
            Hint="Enter the number of computers you own" 
            SharedHintFormatterName="Demo3Formatter" />
         <des:DataTypeCheckValidator ID="Demo3DTCVal2" runat="server" DataType="Integer" 
            ControlIDToEvaluate="Demo3TextBox2" ErrorMessage="Enter an integer" >
            <ErrorFormatterContainer>
               <des:AlertImageErrorFormatter/>
            </ErrorFormatterContainer>
         </des:DataTypeCheckValidator>
         <br/>
         <des:TextBox ID="Demo3TextBox3" runat="server" 
            Hint="Enter the number of concerts you have seen in the last 12 months"
            SharedHintFormatterName="Demo3Formatter" />
         <des:DataTypeCheckValidator ID="Demo3DTCVal3" runat="server" DataType="Integer" 
            ControlIDToEvaluate="Demo3TextBox3" ErrorMessage="Enter an integer" >
            <ErrorFormatterContainer>
               <des:AlertImageErrorFormatter/>
            </ErrorFormatterContainer>
         </des:DataTypeCheckValidator>
      </td>
      <td width="200">
         <asp:Panel ID="Demo3HintControl1" runat="server" Height="70px" Width="100%" BackColor="#FFFFC0"
            BorderStyle="Double" BorderColor="#C04000">
            <asp:Label ID="HintControl2_Text" runat="server"></asp:Label>
         </asp:Panel>
      </td>
   </tr>
</table>

Demo 4: Hint replaced by error message

These two textboxes have their hint and validator error messages shown to their right. Both the HintControl and the Validators have their Display properties set to "Dynamic" so they don't use up any screen space while hidden. They hide the hint on the screen when there is an error. The status bar still shows the hint.

To show an error, type 'abc' into any of these textboxes.

ASP.NET Syntax for this demo

<des:TextBox ID="Demo4TextBox1" runat="server"
   Hint="Enter your age" 
   SharedHintFormatterName="" LocalHintFormatter-DisplayMode="Dynamic"
   LocalHintFormatter-HintControlID="Demo4HintControl1" 
   LocalHintFormatter-HiddenOnError="True" />
<des:DataTypeCheckValidator ID="Demo4DTCVal1" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo4TextBox1" ErrorMessage="Enter an integer">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<asp:Label ID="Demo4HintControl1" runat="server"></asp:Label><br/>
<des:TextBox ID="Demo4TextBox2" runat="server" 
   Hint="Enter the number of computers you own" 
   SharedHintFormatterName=""  LocalHintFormatter-DisplayMode="Dynamic"
   LocalHintFormatter-HintControlID="Demo4HintControl2"
   LocalHintFormatter-HiddenOnError="True" />
<des:DataTypeCheckValidator ID="Demo4DTCVal2" runat="server" DataType="Integer" 
   ControlIDToEvaluate="Demo4TextBox2" ErrorMessage="Enter an integer">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:DataTypeCheckValidator>
<asp:Label ID="Demo4HintControl2" runat="server"></asp:Label><br/>