Where To Locate a Hint
- 2 minutes to read
The ASPxHint allows you to specify where hints are displayed on a web page in two ways:
Setting a Target Element
The target element is a DOM-element that invokes a hint window pointing to this element in response to user interaction (hovering the mouse pointer over it, clicking it, etc.) if the callout (ASPxHint.ShowCallout) is enabled.
To specify a target element for a hint, use one of the following ways:
ASPxHint.TargetSelector property
This property specifies for which UI elements a hint is displayed.
<dx:ASPxHint ID="ASPxHint1" runat="server" TargetSelector=".hintArea"></dx:ASPxHint>
ASPxClientHint.Show client method
Use the ASPxClientHint.Show method to invoke a hint. The method’s first argument is a target element CSS selector or an HTML DOM node that is the target element itself.
ASPxClientHint.Show('.hintArea', { title: 'My Title', content: 'My Content' });
ASPxClientHint.Register client method
Use the Register() client method to register a hint’s functionality with the specified settings (target element, trigger action, content, etc.). The method’s first argument is a target element CSS selector that specifies for which UI elements on a web page a hint displays.
ASPxClientHint.Register('.hintArea', { title: 'My Title', content: 'My Content' });
Note that a call to the Register() method does not immediately invoke a hint window. This method just registers a hint within a web page and allows end-users to invoke the hint (using the specified trigger action over the selected target element). To display a hint immediately, use the Show() method.
Setting X/Y Coordinates
To display a hint at precise X/Y coordinates without targeting a UI element, use one of the following ways:
Use the ASPxHint.X and the ASPxHint.Y properties.
<dx:ASPxHint ID="ASPxHint1" TargetSelector=".hintArea" Content="Hint Content" X="240" Y="45" runat="server"></dx:ASPxHint>
Use the ASPxClientHint.Show (ASPxClientHintOptions options) client method to show a hint at the specified position.
ASPxClientHint.Show('.hintArea', { title: 'My Title', content: 'My Content', x: 240, y: 45 });