Where To Locate a Hint

• Feb 02, 2023
• 2 minutes to read

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

• Set The Target Element
• Set X/Y Coordinates

Setting a Target Element

A 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 (HintSettings.ShowCallout) is enabled.

To specify a hint’s target element, use one of the following ways:

• The HintSettings.TargetSelector property

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

  C#

  @Html.DevExpress().Hint(
      settings => {
          settings.Name = "hint";
          settings.Title = "My Title";
          settings.Content = "My Content";
          settings.TargetSelector = ".hintArea";
      }).GetHtml()
  

• The client 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'
  });
  

• The client ASPxClientHint.Register method

  Use the client Register() 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 the UI elements on a web page for which a hint is displayed.

  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 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:

• The HintSettings.X and the HintSettings.Y properties.

  C#

  @Html.DevExpress().Hint(
      settings => {
          settings.Name = "hint";
          settings.Title = "My Title";
          settings.Content = "My Content";
          settings.X = 240;
          settings.Y = 45;
          settings.TargetSelector = ".hintArea";
      }).GetHtml()
  

• 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
  });