Hint Control
- 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 ASPx Hint. , ASPxTitle Hint. Title Attribute Specify a hint’s title text. ASPx Hint. , ASPxContent Hint. Content Attribute 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 ASPx Hint. Animation Specifies whether a hint should use animation effects when it appears. ASPx Hint. Allow Shift Specifies whether to shift a hint if its content and title are outside the browser’s client area. ASPx Hint. Allow Flip 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 ASPx Hint. Position Specifies a hint’s position relative to the target element. ASPx Hint. , ASPxX Hint. 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 ASPx Client Hint. Showing Occurs on the client side when a hint is about to be shown. ASPx Client Hint. 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 ASPx Client Hint. Register Registers a hint’s functionality with the specified settings. ASPx Client Hint. Show Invokes a hint. ASPx Client , ASPxHint. Hide Client Hint. Hide All Hides a hint or all hints. ASPx Client Hint. Update Updates the ASPx Hint’s target UI elements according to the specified CSS selector ( ASPxHint. ) if the DOM tree is changed.Target Selector ASPx Client , ASPxHint. Update Position Client Hint Window. Update Position Reposition ASPx Hint 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.
<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.
<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.
<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 ASPx
#Demos
You can see ASPxHint in action in the following online demos:
-
This demo illustrates how to get started with ASPxHint.
-
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.
-
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.