ASPxHint Class

A hint control.

Assembly: DevExpress.Web.v19.2.dll

Declaration

C#
VB.NET

public class ASPxHint :
    ASPxWebControl

Public Class ASPxHint
    Inherits ASPxWebControl

Remarks

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.

ASPxHint-Overview

Create a Hint Control

Design Time

The ASPxHint control is available on the DX.19.2: 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.

ASPX

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

Run Time

ASPX

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

C#
VB.NET

using DevExpress.Web;

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

Imports DevExpress.Web

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim hint As ASPxHint = New ASPxHint()
    hint.ID = "ASPxHint1"
    form1.Controls.Add(hint)
    hint.TargetSelector = ".country"
    hint.Position = HintPosition.Top
    hint.Content = "Sample Text"
End Sub

Client-Side API

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

Availability	Available by default.
Class name	ASPxClientHint
Access name	ClientInstanceName
Events	ASPxHint.ClientSideEvents

ASPX

<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>';
            ASPxClientHint.UpdatePosition(e.hintElement);
            });
        return 'loading...';
    },
        position: 'left',
        triggerAction: 'click',
        className: 'paddings'
    });
    function getElementAttr(element) {
        return element.dataset ? element.dataset['visibleindex'] : element.getAttribute('data-visibleindex');
    }

Features

Customizable Content

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

ASPX

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

ASPX

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

ASPX

<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