# Tooltip | WPF Controls | DevExpress Documentation This document defines a tooltip, explains how to use it and lists its main features. Note that the tooltip is available for all [diagram](/WPF/6333/controls-and-libraries/charts-suite/chart-control/diagram/diagram) types. [View Example: Chart for WPF - Display Custom Tooltips Over the Data Point Currently Hovered by the Mouse Pointer](https://github.com/DevExpress-Examples/wpf-charts-custom-draw-chart-series-points) If you wish to use an alternative tool to interact with chart data, you can use a crosshair cursor. See the [Crosshair Cursor](/WPF/14682/controls-and-libraries/charts-suite/chart-control/tooltip-and-crosshair-cursor/crosshair-cursor) topic to learn more. This topic consists of the following sections. - Overview - Using Tooltips - Tooltip Customization - Formatting Tooltip Text - Specify Tooltip Position - Change Tooltip Behavior ## Overview A **tooltip** is a small pop-up rectangle that shows information for hovered [series](/WPF/6339/controls-and-libraries/charts-suite/chart-control/series/series) and [series points](/WPF/6340/controls-and-libraries/charts-suite/chart-control/series/series-points). ![Chart Tooltip](/WPF/images/chart-tooltip17757.png) 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** To start using tooltips, set the [ChartControl.ToolTipEnabled](/WPF/DevExpress.Xpf.Charts.ChartControl.ToolTipEnabled) property to **true**. Note For a series that supports [series point](/WPF/6340/controls-and-libraries/charts-suite/chart-control/series/series-points) markers, a tooltip appears for a [series point](/WPF/6340/controls-and-libraries/charts-suite/chart-control/series/series-points) when these markers are visible. Thus, make sure the **MarkerVisible** property is set to **true** for the corresponding series (e.g.,[LineSeries2D.MarkerVisible](/WPF/DevExpress.Xpf.Charts.LineSeries2D.MarkerVisible)). It is also possible to enable/disable tooltips for a particular series from the [Series.ToolTipEnabled](/WPF/DevExpress.Xpf.Charts.Series.ToolTipEnabled) property. For instance, the following image shows a chart with tooltips disabled for the line series. ![SeriesToolTip](/WPF/images/seriestooltip17763.gif) Note Because a 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 [ChartControlBase.CrosshairEnabled](/WPF/DevExpress.Xpf.Charts.ChartControlBase.CrosshairEnabled) property to **false**. - **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. To accomplish this, you first need to specify the desired name for each series you would like to see on the tooltip via the [Series.DisplayName](/WPF/DevExpress.Xpf.Charts.Series.DisplayName) property. Then set the [ToolTipOptions.ShowForSeries](/WPF/DevExpress.Xpf.Charts.ToolTipOptions.ShowForSeries) property to **true**. In the following image, you can see how this can be done for a chart with two line series. ![Tooltips - ShowForSeries](/WPF/images/tooltips-showforseries17765.gif) ## Tooltip Customization A [ToolTipOptions](/WPF/DevExpress.Xpf.Charts.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](/WPF/DevExpress.Xpf.Charts.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** If you wish to hide a tooltip’s beak and shadow, set the [ChartToolTipController.ShowBeak](/WPF/DevExpress.Xpf.Charts.ChartToolTipController.ShowBeak) and [ChartToolTipController.ShowShadow](/WPF/DevExpress.Xpf.Charts.ChartToolTipController.ShowShadow) properties to **false**. To gain access to the [ChartToolTipController](/WPF/DevExpress.Xpf.Charts.ChartToolTipController) object, use the [ChartControl.ToolTipController](/WPF/DevExpress.Xpf.Charts.ChartControl.ToolTipController) property. The following image shows how these properties work. ![Tooltips - HideBeakAndShadow](/WPF/images/tooltips-hidebeakandshadow17764.png) A [ChartToolTipController](/WPF/DevExpress.Xpf.Charts.ChartToolTipController) object also has properties that allow you to control tooltip behavior. See the Change Tooltip Behavior section for more information. - **Specify a tooltip hint** A hint helps you understand the displayed values of a tooltip. You can place any object (e.g., text, a button or an image) inside a hint using the [Series.ToolTipHint](/WPF/DevExpress.Xpf.Charts.Series.ToolTipHint) and [SeriesPoint.ToolTipHint](/WPF/DevExpress.Xpf.Charts.SeriesPoint.ToolTipHint) properties. The following image shows a hint containing the Line series logo type for the first [Line](/WindowsForms/2976/controls-and-libraries/chart-control/series-views/2d-series-views/point-and-line-series-views/line-chart) series point. ![TooltipHintImage](/WPF/images/tooltiphintimage17784.png) - **Use a tooltip pattern** By default, a tooltip displays an argument and value for each series point. Use the [Series.ToolTipPointPattern](/WPF/DevExpress.Xpf.Charts.Series.ToolTipPointPattern) and [Series.ToolTipSeriesPattern](/WPF/DevExpress.Xpf.Charts.Series.ToolTipSeriesPattern) properties to change the default text displayed within a tooltip, as well as to format series point values. A full list of available placeholders is detailed below. | Pattern | Description | | --- | --- | | {A} | Displays a series point *argument*. | | {V} | Displays series point *values*. | | {VP} | Displays series point *values* as percentages (for a [Pie](/WindowsForms/2978/controls-and-libraries/chart-control/series-views/2d-series-views/pie-and-donut-series-views/pie-chart) series and Full-Stacked series). | | {S} | Displays the *name* of the series. | | {G} | Displays the *name* of a stacked group. | | {W} | Displays the *weight* (for a [Bubble](/WindowsForms/5212/controls-and-libraries/chart-control/series-views/2d-series-views/point-and-line-series-views/bubble-chart) series). | | {V1} | Displays the *first value* (for range series). | | {V2} | Displays the *second value* (for range series). | | {VD} | Displays the *duration* between the first and second data point values (for range series). | | {HV} | Displays the *high value* (for a [Financial](/WindowsForms/2971/controls-and-libraries/chart-control/series-views/2d-series-views/financial-series-views) series). | | {LV} | Displays the *low value* (for a [Financial](/WindowsForms/2971/controls-and-libraries/chart-control/series-views/2d-series-views/financial-series-views) series). | | {OV} | Displays the *open value* (for a [Financial](/WindowsForms/2971/controls-and-libraries/chart-control/series-views/2d-series-views/financial-series-views) series). | | {CV} | Displays the *close value* (for a [Financial](/WindowsForms/2971/controls-and-libraries/chart-control/series-views/2d-series-views/financial-series-views) series). | | {HINT} | Displays a *hint* for a series point. | Note The tooltip series pattern only allows you to specify a string in addition to the {S} default placeholder. The [Format Specifiers](/WindowsForms/2141/common-features/formatting-values/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. - **Use a tooltip template** There are many cases when it is necessary to build a custom tooltip. To solve this task, you can use the [Series.ToolTipSeriesTemplate](/WPF/DevExpress.Xpf.Charts.Series.ToolTipSeriesTemplate) and [Series.ToolTipPointTemplate](/WPF/DevExpress.Xpf.Charts.Series.ToolTipPointTemplate) properties. For instance, you can show a chart within a tooltip when hovering over a series point. ![ChartInsideToolTip](/WPF/images/chartinsidetooltip17770.png) **Examples** The following examples demonstrate how to use this feature. - [How to: Customize the Appearance of a Series Tooltip](/WPF/11894/controls-and-libraries/charts-suite/chart-control/examples/appearance-customization/how-to-customize-the-appearance-of-a-series-tooltip) - [How to: Provide a Custom Tooltip for a Series Point](/WPF/11901/controls-and-libraries/charts-suite/chart-control/examples/appearance-customization/how-to-provide-a-custom-tooltip-for-a-series-point) ## Specify Tooltip Position A tooltip has three modes that define its position on a chart. - [ToolTipMousePosition](/WPF/DevExpress.Xpf.Charts.ToolTipMousePosition) - the tooltip is placed near the mouse pointer. - [ToolTipRelativePosition](/WPF/DevExpress.Xpf.Charts.ToolTipRelativePosition) - the tooltip is placed near the invoked chart element (e.g., on the top of the bar). - [ToolTipFreePosition](/WPF/DevExpress.Xpf.Charts.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](/WPF/DevExpress.Xpf.Charts.CrosshairFreePosition.DockCorner) property set to **TopRight**. ![ToolTipFreePositionMode](/WPF/images/tooltipfreepositionmode17771.png) Note A tooltip is automatically displayed without a beak in [ToolTipFreePosition](/WPF/DevExpress.Xpf.Charts.ToolTipFreePosition) mode. You can get access to the listed tooltip modes via the [ToolTipOptions.ToolTipPosition](/WPF/DevExpress.Xpf.Charts.ToolTipOptions.ToolTipPosition) property. In the **ToolTipMousePosition** and **ToolTipRelativePosition** modes, you can specify tooltip position by utilizing the [ToolTipPositionWithLocation.Location](/WPF/DevExpress.Xpf.Charts.ToolTipPositionWithLocation.Location) and [ToolTipPosition.Offset](/WPF/DevExpress.Xpf.Charts.ToolTipPosition.Offset) properties. ## Change Tooltip Behavior A [ChartToolTipController](/WPF/DevExpress.Xpf.Charts.ChartToolTipController) object provides properties that allow you to change tooltip behavior. The main properties that control tooltip behavior are detailed in the following list. | Member | Description | | --- | --- | | [ChartToolTipController.OpenMode](/WPF/DevExpress.Xpf.Charts.ChartToolTipController.OpenMode) | Specifies the way a tooltip appears on a chart, on either a hover or a mouse click. | | [ChartToolTipController.CloseOnClick](/WPF/DevExpress.Xpf.Charts.ChartToolTipController.CloseOnClick) | A tooltip is closed when a particular chart element is clicked. | | [ChartToolTipController.AutoPopDelay](/WPF/DevExpress.Xpf.Charts.ChartToolTipController.AutoPopDelay) | Specifies the auto pop up delay before the tooltip appears on a chart. | | [ChartToolTipController.InitialDelay](/WPF/DevExpress.Xpf.Charts.ChartToolTipController.InitialDelay) | Specifies the initial delay triggered when a tooltip appears on a diagram. This is a dependency property. | For additional information on chart interaction, refer to the [End-User Capabilities](/WPF/11233/controls-and-libraries/charts-suite/chart-control/zoom-scroll-and-rotate-the-chart/zoom-scroll-and-rotate-the-chart) section. See Also [Tooltip and Crosshair Cursor](/WPF/11974/controls-and-libraries/charts-suite/chart-control/tooltip-and-crosshair-cursor/tooltip-and-crosshair-cursor)