Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Creating Charts
    [Expand]Chart Elements
    [Collapse]End-User Interaction
      Client Chart Designer
     [Expand]Crosshair Cursor
      Tooltips
     Supported Browsers
     Adding a Web Chart
     Handling Client-side Scripts
     Medium Trust Support
     Web Farm and Web Gardens Support
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tooltips

This document defines a tooltip, explains how to use it and lists its main features. Note that the tooltip is available for all diagram types.

If you wish to use an alternative tool to interact with chart data, you can use a crosshair cursor instead. See the Crosshair Cursor topic to learn more.

This topic consists of the following sections.

Expanded Overview

A tooltip is a small pop-up rectangle that shows information for a hovered series and series points.

The ASP.NET Chart Control provides built-in tooltip controller, which allows you to control the tooltip's behavior and position.

The image below shows how to access the ChartToolTipController options in the Properties window.

The main properties of the chart tooltip controller are detailed in the following list.

Member Description
ChartToolTipController.ImagePosition Gets or sets an image position within a tooltip.
ChartToolTipController.OpenMode Specifies the way a tooltip appears on a chart, on either a hover or a mouse click.
ChartToolTipController.ShowImage Gets or sets a value indicating whether an image should be displayed in a tooltip.
ChartToolTipController.ShowText Gets or sets a value indicating whether text should be displayed in tooltips.

By default, a tooltip displays series point arguments and values, but it is possible to specify custom content as well.

See the Format Tooltip Data section to learn more.

Expanded Using Tooltips

  • Enable tooltips

    To start using tooltips, you need to set the WebChartControl.ToolTipEnabled property to true.

    Note

    For a series that supports data point markers, a tooltip appears for a series data point when these markers are visible, so make sure the MarkerVisibility property is set to true for the corresponding series (e.g.,LineSeriesView.MarkerVisibility).

    It is also possible to enable/disable tooltips for a particular series via the SeriesBase.ToolTipEnabled property.

    For instance, the following image shows a chart with tooltips disabled for the Spline series.

    Note

    Because the crosshair cursor is enabled by default, you can see it on a chart together with a tooltip.

    To hide the default crosshair cursor, set the WebChartControl.CrosshairEnabled property to false.

  • Show tooltips for series

    When you interact with a multiple series chart, it is useful to obtain information about a particular series name. Tooltips provide this functionality.

    To accomplish this, you first need to specify the desired name to be displayed in the tooltip for each series from the Series.Name property.

    Then set the ToolTipOptions.ShowForSeries property to true.

    In the image below, a series tooltip is shown for the first Line series.

Expanded Tooltip Customization

A ToolTipOptions object contains properties that allow you to customize the displayed data format in a tooltip, as well as specify the tooltip position on a chart.

Expanded Formatting Tooltip Text

By default, a tooltip displays an argument and value for each series point.

Use the SeriesBase.ToolTipPointPattern and SeriesBase.ToolTipSeriesPattern properties to change the default text displayed within a tooltip, as well as to format series point values.

The full list of available placeholders is listed below.

Pattern Description
{A} Displays a series point argument.
{V} Displays series point values.
{VP} Displays series point values as percentages (for a Pie series and Full-Stacked series views).
{S} Displays the name of the series.
{G} Displays the name of a stacked group.
{W} Displays the weight (for a Bubble series).
{V1} Displays the first value (for a Range series).
{V2} Displays the second value (for a Range series).
{HV} Displays the high value (for a Financial series).
{LV} Displays the low value (for a Financial series).
{OV} Displays the open value (for a Financial series).
{CV} Displays the close value (for a Financial series).
{HINT} Displays a hint for a series point.

The image below shows the {S} {A}:{V:F2} pattern specified for the series points.

Note

The tooltip series pattern only allows you to specify a string in addition to the {S} default placeholder.

The Format Specifiers topic explains which standard and custom formats can be used together with placeholders to format a series point's numeric and date-time values within a tooltip.

Expanded Specify Tooltip Position

A tooltip has three modes that define its position on a chart.

  • ToolTipMousePosition - the tooltip is placed near the mouse pointer.
  • ToolTipRelativePosition - the tooltip is placed near the invoked chart element (e.g., on the bar's top).
  • ToolTipFreePosition - the tooltip is placed unbound to any invoked chart element and its position is defined by the current offset, dock target and dock corner.

The following image shows the last tooltip mode with the CrosshairFreePosition.DockCorner property set to TopRight.

You can gain access to the above tooltip modes via the ToolTipOptions.ToolTipPosition property.

To do this at design time, click the ellipse button in the Properties window.

This invokes the Choose Tool Tip Position dialog.

In the ToollTipFreePosition and ToolTipRelativePosition modes, you can specify tooltip position by utilizing the ToolTipPositionWithOffset.OffsetX and ToolTipPositionWithOffset.OffsetY properties.

For additional information on chart interaction, refer to the End-User Interaction section.

Is this topic helpful?​​​​​​​