ASPxHint Class

A hint control.

Assembly : DevExpress.Web.v25.2.dll

Declaration

C#
VB.NET

csharp

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.

Create a Hint Control

Design Time

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

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

ASPX

aspx

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

Run Time

ASPX

aspx

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

C#
VB.NET

csharp

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

Note

DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.

Client-Side API

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

Availability

Available by default.

| |

Client object type

ASPxClientHint

| |

Access name

ASPxHint.ClientInstanceName

| |

Events

ASPxHint.ClientSideEvents

ASPX

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

Customizable Content

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

ASPX

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

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

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