How to: Set Hint Content

• Oct 06, 2023
• 4 minutes to read

The ASPxHint control consists of the Title and Content elements.

Use one of the following techniques to specify the Hint control’s content and title:

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

Use the Content, ContentAttribute, Title, and TitleAttribute properties.

The ASPxHint control allows you to set its content and title text in the following ways:

• Use the ASPxHint.Content and ASPxHint.Title properties to specify the content and title text directly.

  ASPX

  <dx:ASPxHint ID="ASPxHint1" Selector=".myImage" Title="My Title"  Content="My Content" runat="server"></dx:ASPxHint>
  

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

  ASPX

  <dx:ASPxHint ID="ASPxHint1" TargetSelector=".myImage" ContentAttribute="alt" TitleAttribute="class" runat="server"></dx:ASPxHint>        
  <dx:ASPxImage ID="ASPxImage1" runat="server" alt="Cumulative expenses by year" ImageUrl="~/Content/myImage.png" CssClass="myImage"></dx:ASPxImage>
  

Use 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.

  ASPX

  <dx:ASPxImage ID="ASPxImage1" runat="server" alt="Cumulative expenses by year" ImageUrl="~/Content/myImage.png" CssClass="myImage"></dx:ASPxImage>
  

  JS

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

• Use the onShowing function to specify the HTML-based hint’s content and title dynamically. This 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 use HTML tags within the hint’s content and title directly in 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>";
          }
      });
  

Use 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.

  ASPX

  <dx:ASPxImage ID="ASPxImage1" runat="server" alt="Cumulative expenses by year" ImageUrl="~/Content/myImage.png" CssClass="myImage"></dx:ASPxImage>
  

  JS

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

  Note that contentAttribute is set to “title” (the default setting). 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');
  

• Use the method’s onShowing function to specify the hint’s content and title dynamically. This 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.

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