How to Set Hint Content

• May 24, 2023
• 4 minutes to read

The DevExpress Hint consists of the Title and Content elements.

Use one of the following approaches to set a Hint’s content and title:

• Use the Content, ContentAttribute, Title, TitleAttribute properties.
• Use the client Show() method.
• Use the client Register() method.

Using the Content, ContentAttribute, Title, TitleAttribute properties.

A Hint allows you to specify its content and title text in two ways:

• Specify the content and title text directly using the HintSettings.Content and HintSettings.Title properties.

  C#

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

• Specify the target element’s attributes from which a hint obtains its content and title.

  C#

  <img alt="Cumulative expenses by year" class="myImage" src="~/Content/myImage.png">
  
  @Html.DevExpress().Hint(
      settings => {
          settings.Name = "hint";
          settings.TargetSelector = ".myImage";
          settings.TitleAttribute = "class";
          settings.ContentAttribute = "alt";
      }).GetHtml()
  

Using the Show() method

The ASPxClientHint.Show method invokes a hint. It also obtains the content and title arguments that can be specified in the following ways. Note that the title argument is optional.

• Pass the HTML-based hint’s content and title directly as the Show method’s arguments.

  JS

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

• Specify the target element’s attributes from which a hint obtains its content and title.

  C#

  <img alt="Cumulative expenses by year" class="myImage" src="~/Content/myImage.png">
  

  JS

  ASPxClientHint.Show('.myImage', {
      titleAttribute: 'class',
      contentAttribute: 'alt'
  });
  

• Specify the HTML-based hint’s content and title dynamically using the onShowing function. The onShowing function can be used either as the Show method’s second argument or as a part of the method’s options argument (ASPxClientHintOptions).

  JS

  ASPxClientHint.Show('.myImage', {
          onShowing: function (sender, e) {
              return {
                  title: "My Title",
                  content: "My Content" 
              };
          }
      });
  

  You can also set the HTML content for the hint’s content and title directly in the markup.

  JS

  ASPxClientHint.Show('.myImage', {
          showTitle: true,
          onShowing: function (sender, e) {
                  e.titleElement.innerHTML = "My Title";
                  e.contentElement.innerHTML = "My Content";
                  // You can instead specify the entire hint content using the e.hintElement.innerHTML property. Note that default hint styles are not applied to a hint in this case.
                  //e.hintElement.innerHTML = "<div style="back-color: yellow;"><p>sample title html</p><p>sample content html</p></div>";
          }
      });
  

Using the Register() method

The ASPxClientHint.Register method registers a hint’s functionality with the specified settings. It also obtains the content and title arguments that can be specified in the following ways. Note that the title argument is optional.

• Pass the HTML-based hint’s content and title directly as the method’s arguments.

  JS

  ASPxClientHint.Register('.myImage', {
          title: 'My Title',
          content: 'My Content'
  });
  

• Specify the target element’s attributes from which a hint obtains its content and title.

  C#

  <img alt="Cumulative expenses by year" class="myImage" src="~/Content/myImage.png">
  

  JS

  ASPxClientHint.Register('.myImage', {
      titleAttribute: 'class',
      contentAttribute: 'alt'
  });
  

  Note that the contentAttribute attribute is set to “title” by default. If the target element‘s title attribute is specified, there is no need to set the contentAttribute argument value in the Register method.

  JS

  ASPxClientHint.Register('.myImage');
  

• Specify the hint’s content and title dynamically using the method’s ASPxClientHintOptions.onShowing function. The onShowing function can be utilized either as the Register method’s second argument or as a part of the options argument (ASPxClientHintOptions).

  JS

  ASPxClientHint.Register('.myImage', {
          onShowing: function (sender, e) {
              return {
                  title: "My Title",
                  content: "My Content" 
              };
          }
      });
  

  You can also set the HTML-based content for the hint’s content and title directly in the markup for two ways.

  JS

  ASPxClientHint.Register('.myImage', {
          showTitle: true,
          onShowing: function (sender, e) {
                  e.titleElement.innerHTML = "My Title";
                  e.contentElement.innerHTML = "My Content";
                  // You can instead specify the entire hint content using the e.hintElement.innerHTML property. Note that default hint styles are not applied to a hint in this case.
                  //e.hintElement.innerHTML = "<div style="back-color: yellow;"><p>sample title html</p><p>sample content html</p></div>";
          }
      });