Skip to main content

Hint

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

ASPxHint-Overview

#Visual Elements

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

ASPxHint-VisualElements

#Features

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

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

Hint-Declaration

#Demos

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

  • Hint - Overview

    The demo illustrates how to get started with the Hint extension.

  • Hint - Features

    This demo shows main features of the Hint extension.

  • Hint - Load Content on Demand

    This demo illustrates how to create and populate a hint programmatically on the client side using our client-side functionality.

  • Hint - Hint for Text Ellipsis

    This demo illustrates how to use the Hint extension instead of standard tooltips.

  • Hint - Choosing a Seat

    This demo illustrates how to implement a model of a cinema hall and show ticket prices for different seats using the Hint extension.