Hint

May 24, 2023
3 minutes to read

The DevExpress Hint (HintExtension) allows you to generate a hint message for a UI element on a web page. A hint displays within a box with an arrow targeting the specified UI element in response to user interaction.

Visual Elements

The following image illustrates the Hint control’s visual elements:

Features

Customizable Content
Customizable Trigger Action
Animation
Positioning
Customizable Size

Implementation Detail

The HintExtension class realizes the Hint and can be accessed via the ExtensionsFactory.Hint helper method, which is used to add a Hint extension to a view. This method’s parameter provides access to the Hint ‘s settings implemented by the HintSettings class, allowing you to customize the extension fully.

The ASPxClientHint object represents the Hint ‘s client counterpart.

Declaration

The Hint can be added to a view in the following manner.

Razor (View)

razor

@Html.DevExpress().Hint(settings => {
    settings.Name = "Hint";
    settings.Selector = ".hintArea";
    settings.Content = "Hint control";
}).GetHtml()

<div class="hintArea" style="display: table; margin: 0 auto">Move mouse over here to invoke a hint</div>

The code result is demonstrated by the image below.

Demos

To see the Hint in action, review the following online demos: