How to: Specify Hint Position

• Oct 06, 2023
• 2 minutes to read

The ASPxHint allows you to specify where hints are displayed on a web page in two ways:

• Set the Target Element
• Set X/Y Coordinates

Set the Target Element

The target element is a DOM element that invokes a hint window that points to this element in response to user interaction (when a user hovers the mouse pointer over it, clicks it, and so forth) if the callout (ASPxHint.ShowCallout) is enabled.

Use one of the following techniques to specify a target element for a hint:

• ASPxHint.TargetSelector property

  This property specifies for which UI elements a hint is displayed.

  ASPX

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

• ASPxClientHint.Show 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.

  JS

  ASPxClientHint.Show('.hintArea', {
      title: 'My Title',
      content: 'My Content'
  });
  

• ASPxClientHint.Register method

  Use the client Register() method to register a hint’s functionality with the specified settings (target element, trigger action, content, and so forth). The method’s first argument is a target element CSS selector that specifies for which UI elements on a web page a hint displays.

  JS

  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 only registers a hint within a web page and allows users to invoke the hint (using the specified trigger action over the selected target element). To display a hint immediately, use the Show() method.

Set X/Y Coordinates

Do one of the following to display a hint at precise X/Y coordinates without targeting a UI element:

• Use the ASPxHint.X and the ASPxHint.Y properties.

  ASPX

  <dx:ASPxHint ID="ASPxHint1" TargetSelector=".hintArea" Content="Hint Content" X="240" Y="45" runat="server"></dx:ASPxHint>
  

• Use the client ASPxClientHint.Show (ASPxClientHintOptions options) method to show a hint at the specified position.

  JS

  ASPxClientHint.Show('.hintArea', {
      title: 'My Title',
      content: 'My Content',
      x: 240,
      y: 45
  });