Hint Control

• Jul 14, 2021
• 4 minutes to read

The DevExpress ASP.NET Hint Control (ASPxHint) allows you to generate a hint message for a UI element on a web page. The hint is displayed in a box with an arrow that targets the specified UI element when users hover over this element.

Visual Elements

The following image illustrates the ASPxHint‘s visual elements:

Server-Side Features

• Customizable Content

  You can use the following properties to specify a hint’s content:

  Property	Description
  ASPxHint.Title, ASPxHint.TitleAttribute	Specify a hint’s title text.
  ASPxHint.Content, ASPxHint.ContentAttribute	Specify a hint’s content text.

• Customizable Trigger Action

  The ASPxHint.TriggerAction property allows you to specify which user action triggers a hint (click or mouse over).

• Animation

  Property	Description
  ASPxHint.Animation	Specifies whether a hint should use animation effects when it appears.
  ASPxHint.AllowShift	Specifies whether to shift a hint if its content and title are outside the browser’s client area.
  ASPxHint.AllowFlip	Specifies whether to flip a hint to the opposite position relative to the target element.

• Positioning

  You can use the following properties to specify a hint’s position:

  Property	Description
  ASPxHint.Position	Specifies a hint’s position relative to the target element.
  ASPxHint.X, ASPxHint.Y	Specify a hint’s X and Y position on the form.

• Customizable Size

  The ASPxWebControl.Width and ASPxWebControl.Height properties allow you to specify a hint’s size.

Client-Side Features

• Client-side events allow you to respond to a hint’s visibility state changes.

  Relative API:

  Reference	Description
  ASPxClientHint.Showing	Occurs on the client side when a hint is about to be shown.
  ASPxClientHint.Hiding	Occurs on the client side when a hint is about to be hidden.

• The client-side API allows you to register a hint’s functionality, show and hide a hint, specify its position relative to other HTML elements and change its content.

  Relative API:

  Reference	Description
  ASPxClientHint.Register	Registers a hint’s functionality with the specified settings.
  ASPxClientHint.Show	Invokes a hint.
  ASPxClientHint.Hide, ASPxClientHint.HideAll	Hides a hint or all hints.
  ASPxClientHint.Update	Updates the ASPxHint’s target UI elements according to the specified CSS selector (ASPxHint.TargetSelector) if the DOM tree is changed.
  ASPxClientHint.UpdatePosition, ASPxClientHintWindow.UpdatePosition	Reposition ASPxHint if the page element(s) to which it is attached is moved.

Get Started

• Step 1. Create a new website or open an existing one in Visual Studio. Locate the ASPxHint item in the Visual Studio toolbox and drop it onto the form.

  

  ASPX

  <dx:ASPxHint ID="ASPxHint1" runat="server"></dx:ASPxHint>
  

• Step 2. Add a button to a form with the specified style settings. A hint is displayed when a user moves the mouse pointer over this button.

  ASPX

  <style>
      .myClass[title] {/* style settings*/}
  </style>
  ...
  <asp:Button ID="Button1" CssClass="myClass" runat="server" Text="Button" />
  

• Step 3. Set the hint’s ASPxHint.TargetSelector and ASPxHint.Content properties to specify the web page element(s) for which the hint displays and the hint’s content, respectively.

  ASPX

  <dx:ASPxHint ID="ASPxHint1" TargetSelector=".myClass"  Content="Hint Content" runat="server"></dx:ASPxHint>
  

• Step 4. Run the website to see the result.

  

Note

Use the ASPxClientHint.Update method to update the ASPxHint’s target UI elements as the hint doesn’t automatically inspect the changes in the DOM tree if any element has been removed or added on the page.

Demos

You can see ASPxHint in action in the following online demos:

• ASPxHint - Overview

  This demo illustrates how to get started with ASPxHint.

• ASPxHint - Features

  This demo shows the ASPxHint’s main features.

• ASPxHint - Load Content on Demand

  This demo illustrates how to create and populate a hint programmatically on the client side using our client-side functionality.

• ASPxHint - Hint for Text Ellipsis

  This demo shows how to use ASPxHint instead of standard tooltips.

• ASPxHint - Choosing a Seat

  This demo illustrates how to use ASPxHint to create an application that displays the seating area of a movie theater and ticket prices for different seats.