The requested page is not available for the requested platform. You are viewing the content for Default platform.

Overview

  • 3 min to read

The DevExpress Hint (HintExtension) allows generating 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.

View code (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.

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.