A newer version of this page is available. Switch to the current version.

ASPxHint Class

A hint control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.1.dll


public class ASPxHint :


The ASPxHint control allows you to display a hint message for a UI element on a web page. A hint is displayed within a box with an arrow targeting the specified UI element in response to user interaction.


Create a Hint Control

Design Time

The ASPxHint control is available on the DX.19.1: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize control settings, or paste the control markup in the page’s source code.

<dx:ASPxHint ID="ASPxHint1" runat="server" TargetSelector=".left" Position="left" Content="Sample Text" />

Run Time

<div class="country" style="width: 50px">
    <asp:Button ID="Button1" runat="server" Text="Button" />
using DevExpress.Web;

protected void Page_Load(object sender, EventArgs e)
    ASPxHint hint = new ASPxHint();
    hint.ID = "ASPxHint1";
    hint.TargetSelector = ".country";
    hint.Position = HintPosition.Top;
    hint.Content = "Sample Text";

Client-Side API

The ASPxHint‘s client-side API is implemented with JavaScript language and exposed by the ASPxClientHint object.


Available by default.

Class name


Access name




<dx:ASPxHint ID="ASPxHint1" runat="server"></dx:ASPxHint>
ASPxClientHint.Register('[data-visibleindex]', {
    onShowing: function(s, e) {
        var index = getElementAttr(e.targetElement);
        var key = Grid.GetRowKey(index);
        Grid.GetRowValues(index, 'Notes', function(content) {
            e.contentElement.innerHTML = '<div class="hintContent">' +
              '<img src="LoadContentOnDemand.aspx?photo=' + key + '" />' +
              '<div>' + content + '</div>' + '</div>';
        return 'loading...';
        position: 'left',
        triggerAction: 'click',
        className: 'paddings'
    function getElementAttr(element) {
        return element.dataset ? element.dataset['visibleindex'] : element.getAttribute('data-visibleindex');


Customizable Content

You can specify custom content for a hint either on the server or client side programmatically.

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

Learn more

Hint Position

The hint can be displayed on any side (left, right, top, bottom) of the target element.

<dx:ASPxHint ID="ASPxHint1" runat="server" TargetSelector=".left" Position="left" Content="Sample Text" />

Learn more

Trigger Action

The hint allows you to specify which action triggers a hint (hover, click, focus, programmatic).

<dx:ASPxHint ID="ASPxHint1" TargetSelector=".myImage" TriggerAction="HoverAndFocus" runat="server"></dx:ASPxHint>        
<dx:ASPxImage ID="ASPxImage1" ImageUrl="~/Content/myImage.png" CssClass="myImage" runat="server"></dx:ASPxImage>

Learn more

Concept and Getting Started

Hint Control - Overview

Online Demos