Tooltips

• Jun 16, 2022
• 4 minutes to read

This topic 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 following help topic to learn more: Crosshair Cursor.

The topic consists of the following sections.

• Overview
• Using Tooltips

• Tooltip Customization

  • Format Tooltip Text
  • Specify Tooltip Position

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

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

See the following section to learn more: Format Tooltip Data.

Using Tooltips

• Enable tooltips

  Set the WebChartControl.ToolTipEnabled property to true to use tooltips.

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

  You can also use the SeriesBase.ToolTipEnabled property to enable/disable tooltips for a particular series.

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

  

  Note

  Because the crosshair cursor is enabled (the default setting), it is displayed on a chart together with a tooltip.

  To hide the 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 allow you to do this.

  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.

  

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.

Format Tooltip Text

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 and to format series point values.

The following placeholders are available.

Pattern	Description
{A}	Displays a series point argument.
{V}	Displays series point values.
{VP}	Displays series point values as percentages (for Pie 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 following 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: Format Specifiers.

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., above the bar).
• ToolTipFreePosition - the tooltip is not attached to any chart element and its position is defined by the current offset, dock target and dock corner.

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

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

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

This invokes the Choose Tooltip Position dialog.

In ToolTipFreePosition and ToolTipRelativePosition modes, you can utilize the ToolTipPositionWithOffset.OffsetX and ToolTipPositionWithOffset.OffsetY properties to specify tooltip position.

Refer to the following help topic for additional information on chart interaction: End-User Interaction.