How to Set Hint Content

• Aug 24, 2021
• 4 minutes to read

The ASPxHint consists of the Title and Content elements.

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

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

Using the Content, ContentAttribute, Title, TitleAttribute properties.

The ASPxHint control allows setting its content and title text in two ways:

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

  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>
  

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.

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

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

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

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