Tooltip

• Apr 17, 2025
• 6 minutes to read

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.

View Example: Chart for WPF - Display Custom Tooltips Over the Data Point Currently Hovered by the Mouse Pointer

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

This topic consists of the following sections.

• Overview
• Using Tooltips
• Tooltip Customization

Overview

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

As you can see in the image, a tooltip also contains a beak that points to a series point, drawing your attention to this hovered element.

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

See the Formatting Tooltip Text section to learn more.

Using Tooltips

• Enable tooltips

• Show tooltips for series
  When you interact with a multiple series chart, it makes sense to get information about a particular series name. Tooltips provide this functionality.

Tooltip Customization

A ToolTipOptions object contains properties allowing you to customize the tooltip’s behavior, as well as specify a tooltip position on a chart.

Use the ChartControl.ToolTipOptions property to gain access to tooltip options.

The following XAML demonstrates how this is done.

• XAML

<Window x:Class="Tooltip.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <dxc:ChartControl ToolTipEnabled="True" >
            <dxc:ChartControl.ToolTipOptions>
                <dxc:ToolTipOptions ShowForSeries="True" ShowForPoints="False">
                    <dxc:ToolTipOptions.ToolTipPosition>
                        <dxc:ToolTipMousePosition Location="TopLeft" />
                    </dxc:ToolTipOptions.ToolTipPosition>
                </dxc:ToolTipOptions>
            </dxc:ChartControl.ToolTipOptions>          
        </dxc:ChartControl>
    </Grid>
</Window>

Formatting Tooltip Text

A tooltip provides settings that allow you to change its displayed content.

• Hide the tooltip’s beak and shadow

• Specify a tooltip hint

• Use a tooltip pattern

• Use a tooltip template

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 top of the bar).
• 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 image below shows the last tooltip mode with the CrosshairFreePosition.DockCorner property set to TopRight.

Note

A tooltip is automatically displayed without a beak in ToolTipFreePosition mode.

You can get access to the listed tooltip modes via the ToolTipOptions.ToolTipPosition property.

In the ToolTipMousePosition and ToolTipRelativePosition modes, you can specify tooltip position by utilizing the ToolTipPositionWithLocation.Location and ToolTipPosition.Offset properties.

Change Tooltip Behavior

A ChartToolTipController object provides properties that allow you to change tooltip behavior.

The main properties that control tooltip behavior are detailed in the following list.

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

See Also

Tooltip and Crosshair Cursor