TooltipSettings

16 Mar 20263 minutes to read

Properties

border BorderModel

Options for customizing the tooltip borders, including the color and width of the tooltip’s border.

distance number

Specifies the gap (in pixels) between the tooltip and its
pointer or target element. Increasing this value
positions the tooltip farther away, improving clarity
and preventing overlap with chart or UI elements

Note: This property is supported only for Chart tooltips.
It is not applicable to other components/modules.

Negative values are ignored.

Defaults to 0

duration number

Duration of the tooltip animation, specified in milliseconds.

Defaults to 300

enable boolean

If set to true, enables tooltips for the data points.

Defaults to false.

enableAnimation boolean

If set to true, the tooltip will animate as it moves from one point to another.

Defaults to true.

enableHighlight boolean

When set to true, highlights all points in the hovered series while dimming points in other series for better focus and clarity.

Defaults to false.

enableMarker boolean

If set to true, enables the marker in the chart tooltip.

Defaults to true.

enableTextWrap boolean

Wraps the tooltip’s long text based on the available space.

Note that this feature applies only to chart tooltips.

Defaults to false

fadeOutDuration number

Duration of the fade-out animation for hiding the tooltip, in milliseconds.

Defaults to 1000

fadeOutMode FadeOutMode

Specifies the mode for the fade-out animation when hiding the tooltip.

Defaults to Move

fill string

The fill color of the tooltip, specified as a valid CSS color string in hex or rgba format.

Defaults to null

followPointer boolean

If true, the chart displays a tooltip for the data point nearest the cursor;

Defaults to false

format string

Specifies the format for customizing the content of the tooltip.

Defaults to null.

header string

Customizes the header text for the tooltip. By default, this property displays the series name.

Defaults to null

location LocationModel

Specifies the location of the tooltip relative to the chart.
If x is 20, the tooltip moves 20 pixels to the right of the chart.

<div id='Chart'></div>

let chart: Chart = new Chart({
...
tooltip: {
       enable: true,
       location: { x: 100, y: 150 }
 }
...
});
chart.appendTo('#Chart');

opacity number

The opacity of the tooltip, expressed as a numerical value.

Defaults to null

shared boolean

If set to true, a single tooltip will be displayed for each index.

Defaults to false.

showHeaderLine boolean

Specifies whether to display the header line in the tooltip.

Defaults to true

showNearestPoint boolean

Specifies whether the nearest points should be included in the shared tooltip.
By default, the nearest data points are displayed.
Set this property to false to exclude the nearest point.

Defaults to true

showNearestTooltip boolean

Enables or disables the display of tooltips for the nearest data point to the cursor.

Defaults to false.

split boolean

Specifies whether to enable split tooltip support.
When set to true, tooltips will be displayed separately for each point in the series.

Defaults to false

template string|Function

A custom template used to format the tooltip content. Use ${x} and ${y} as placeholders for the corresponding data points.

Defaults to null.

textStyle FontModel

This property defines the font family, size, style, weight, and color for the tooltip text.