---
title: "Tooltips"
framework: javascript
version: "14.1.0"
---

# Tooltips

Tooltips allow users to see extra contextual information without overcrowding the chart.

> **Note**
>
> This page covers Series tooltips. For tooltips on other chart elements, see the API options for [title](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-title-tooltip), [subtitle](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-subtitle-tooltip), [footnote](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-footnote-tooltip), and [legend items](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-legend-item-tooltip).

## Default Tooltip

The tooltip content is based on the data values and keys of the series. If provided, the `_Name` properties will be used instead of the `_Key` properties.

#### Default Tooltip

```ts
import {
  AgBarSeriesOptions,
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "month",
      stacked: true,
      yKey: "value1",
      yName: "Sweaters Made",
    },
    {
      type: "bar",
      xKey: "month",
      stacked: true,
      yKey: "hats_made",
      yName: "Hats Made",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function removeYNames() {
  for (const series of options.series ?? []) {
    (series as AgBarSeriesOptions).yName = undefined;
  }

  chart.update(options);
}

function addYNames() {
  (options.series![0] as AgBarSeriesOptions).yName = "Sweaters Made";
  if (options.series![1])
    (options.series![1] as AgBarSeriesOptions).yName = "Hats Made";
  if (options.series![2])
    (options.series![2] as AgBarSeriesOptions).yName = "Gloves Made";
  if (options.series![3])
    (options.series![3] as AgBarSeriesOptions).yName = "Socks Made";
  if (options.series![4])
    (options.series![4] as AgBarSeriesOptions).yName = "Sunglasses Made";

  chart.update(options);
}

function showNumSeries(num: number) {
  const hasYNames = (options.series![0] as AgBarSeriesOptions).yName != null;
  if (num === 1) {
    options.series = [
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "value1",
        yName: "Sweaters Made",
      },
    ];
  } else if (num === 2) {
    options.series = [
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "value1",
        yName: "Sweaters Made",
      },
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "hats_made",
        yName: "Hats Made",
      },
    ];
  } else {
    options.series = [
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "value1",
        yName: "Sweaters Made",
      },
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "hats_made",
        yName: "Hats Made",
      },
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "gloves_made",
        yName: "Gloves Made",
      },
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "socks_made",
        yName: "Socks Made",
      },
      {
        type: "bar",
        xKey: "month",
        stacked: true,
        yKey: "sunglasses_made",
        yName: "Sunglasses Made",
      },
    ];
  }
  if (!hasYNames) {
    for (const series of options.series ?? []) {
      (series as AgBarSeriesOptions).yName = undefined;
    }
  }

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).removeYNames = removeYNames;
  (<any>window).addYNames = addYNames;
  (<any>window).showNumSeries = showNumSeries;
}
```

[Live example: Default Tooltip](https://www.ag-grid.com/charts/typescript/tooltips/examples/default-tooltip)

```js
{
    series: [
        { type: 'bar', xKey: 'month', stacked: true, yKey: 'value1', yName: 'Sweaters Made' },
        { type: 'bar', xKey: 'month', stacked: true, yKey: 'hats_made', yName: 'Hats Made' },
    ],
}
```

In this example:

- The `yName` is used in the tooltip and legend when provided.
- The default [tooltip mode](#tooltip-modes) is:
  - `compact` when showing a single series with no `yName`.
  - `single` when showing more than 3 series, or a single series with `yName`.
  - `shared` when showing 3 or fewer series.

The `_Name` keys mirror the data keys and differ between series types. See the series specific [API Reference](https://www.ag-grid.com/charts/options/#reference-AgChartOptions-series) for more details.

## Tooltip Modes

By default a shared tooltip will be used for most cartesian charts containing 3 or fewer series. Use the mode option to show a `single`, `shared` or `compact` tooltip.

#### Tooltip Mode

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AgTooltipMode,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  tooltip: {
    mode: "single",
  },
  series: [
    {
      type: "line",
      xKey: "year",
      yKey: "Onshore wind",
      yName: "Onshore Wind",
    },
    {
      type: "line",
      xKey: "year",
      yKey: "Offshore wind",
      yName: "Offshore Wind",
    },
    {
      type: "line",
      xKey: "year",
      yKey: "Solar photovoltaics",
      yName: "Solar Photovoltaics",
    },
    {
      type: "line",
      xKey: "year",
      yKey: "Plant biomass",
      yName: "Plant Biomass",
    },
    {
      type: "line",
      xKey: "year",
      yKey: "Landfill gas",
      yName: "Landfill Gas",
    },
  ],
  axes: {
    x: {
      type: "unit-time",
    },
    y: {
      position: "right",
      type: "number",
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setTooltipMode(mode: AgTooltipMode) {
  options.tooltip!.mode = mode;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setTooltipMode = setTooltipMode;
}
```

[Live example: Tooltip Mode](https://www.ag-grid.com/charts/typescript/tooltips/examples/tooltip-mode)

```js
{
    tooltip: {
        mode: 'shared', // or 'single' or 'compact'
    },
}
```

The options for `mode` are:

- `single` - shows a title, symbol and data values for a single series.
- `shared` - shows a merged tooltip, combining the tooltips of all series sharing the same x-value.
- `compact` - shows fewer data fields and uses less padding.

## Tooltip Position

By default the tooltip is anchored to the hovered datapoint. Use `placement`, `anchorTo` and `offset` to customise this.

#### Tooltip Position

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { AgTooltipAnchorTo, AgTooltipPlacement } from "ag-charts-types";
import { getData } from "./data";

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  series: [
    {
      type: "line",
      xKey: "month",
      yKey: "sweaters",
      yName: "Sweaters Made",
    },
  ],
  tooltip: {
    position: {
      placement: "top",
      offset: 12,
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setAnchorTo(anchorTo: AgTooltipAnchorTo) {
  options.tooltip!.position!.anchorTo = anchorTo;

  chart.update(options);
}

function setPlacement(placement: string) {
  options.tooltip!.position!.placement = placement.split(
    /,\s+/g,
  ) as AgTooltipPlacement[];

  chart.update(options);
}

function setOffset(event: Event) {
  const value = Number((event.target as HTMLInputElement).value);
  document.getElementById("offsetValue")!.textContent = String(value);
  options.tooltip!.position!.offset = value;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setAnchorTo = setAnchorTo;
  (<any>window).setPlacement = setPlacement;
  (<any>window).setOffset = setOffset;
}
```

[Live example: Tooltip Position](https://www.ag-grid.com/charts/typescript/tooltips/examples/tooltip-position)

```js
{
    tooltip: {
        position: {
            anchorTo: 'node',
            placement: ['top', 'bottom', 'left', 'right'],
            offset: 12,
        },
    },
}
```

### Placement

The `placement` option positions the tooltip relative to its [anchor point](#anchor-point), such as `top` or `top-right`. See the [API Reference](#reference-AgChartTooltipOptions-position-placement) for the full list of values.

Fallback positions can be provided in an array of `placement` values. The tooltip will use the first position that has sufficient space.

```js
{
    tooltip: {
        position: {
            anchorTo: 'node',
            placement: ['left', 'right'],
        },
    },
}
```

In the above example:

- Change the 'Placement' dropdown to 'Left + Right fallback'.
- Hover the leftmost datapoint and see that the tooltip goes to the right of the marker as there is no room on the left.

### Anchor Point

The options for `anchorTo` are:

- `node` - the active datapoint, such as the marker or bar.
- `pointer` - the mouse pointer or [single finger touch](https://www.ag-grid.com/charts/javascript/touch/#single-finger-touch-dragging) position.
- `chart` - the chart container.

### Offset

Use `tooltip.position.offset` to control the gap between the tooltip and its anchor point in the placement direction, or `xOffset` and `yOffset` for specific horizontal and vertical offsets.

```js
{
    tooltip: {
        position: {
            anchorTo: 'node',
            placement: ['right', 'left'],
            offset: 20,
        },
    },
}
```

In the above example:

- Change the 'Placement' dropdown to 'Left + Right fallback' and change the 'Offset' value.
- Hover the leftmost datapoint and see that the offset is applied to the right of the marker, hover the rightmost datapoint and see that the offset is applied to the left.
- The directional `offset` can be used together with `xOffset` and `yOffset`.

## Tooltip Arrow

The default tooltip displays an arrow below it to indicate its exact point of origin. This is removed when the tooltip is constrained by the container or has an `xOffset` or `yOffset` supplied. The directional `offset` does not suppress the arrow.

#### Removing the Tooltip Arrow

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "month",
      stacked: true,
      yKey: "value1",
      yName: "Sweaters Made",
    },
    {
      type: "bar",
      xKey: "month",
      stacked: true,
      yKey: "hats_made",
      yName: "Hats Made",
    },
  ],
  tooltip: {
    showArrow: true,
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function toggleTooltipArrow() {
  options.tooltip!.showArrow = !options.tooltip!.showArrow;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleTooltipArrow = toggleTooltipArrow;
}
```

[Live example: Removing the Tooltip Arrow](https://www.ag-grid.com/charts/typescript/tooltips/examples/default-tooltip-arrow)

Use the `tooltip.showArrow` option to change this behaviour.

```js
{
    tooltip: {
        showArrow: false,
    },
}
```

## Tooltip Pagination

Pagination allows cycling through overlapping datapoints by hovering and then clicking on the mouse. Use `pagination: true` to enable.

#### Tooltip Pagination

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  BubbleSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";

ModuleRegistry.registerModules([
  BubbleSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions<DataType> = {
  data: getData(),
  title: {
    text: "Most Populous Cities",
  },
  footnote: {
    text: "Source: Simple Maps",
  },
  series: [
    {
      type: "bubble",
      title: "Most populous cities",
      xKey: "lon",
      xName: "Longitude",
      yKey: "lat",
      yName: "Latitude",
      sizeKey: "population",
      sizeName: "Population",
      labelKey: "city",
      labelName: "City",
      maxSize: 50,
      tooltip: {
        renderer: ({ datum }) => ({ title: datum.city }),
      },
    },
  ],
  tooltip: {
    pagination: true,
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Tooltip Pagination](https://www.ag-grid.com/charts/typescript/tooltips/examples/tooltip-pagination)

Pagination will only become available when two or more data points are under the cursor.

```js
{
    tooltip: {
        pagination: true,
    },
}
```

In the above example:

- Hover overlapping bubbles.
- The cursor turns into a hand and the tooltip displays the number of data points under the cursor.
- Click in the current position to cycle through the data points, highlighting and displaying the tooltip for each in turn.

## Customisation

The exact contents and structure of a tooltip depends on the series and keys used.

Tooltips can contain any number of the following items, in order:-

- A heading - typically the x-value for a cartesian series.
- A series symbol - this graphically depicts a series and usually matches the legend item.
- A title - typically the identifying value for non-cartesian series.
- Some data rows - these contain one or more label and value pairs corresponding to information for a series.

### Using CSS Styles

#### Default Tooltip with Custom Styling

```ts
import {
  AgChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgChartOptions = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "month",
      yKey: "sweaters",
      yName: "Sweaters Made",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Default Tooltip with Custom Styling](https://www.ag-grid.com/charts/typescript/tooltips/examples/default-tooltip-styling)

The default tooltip uses the following CSS classes for the tooltip elements:

- `ag-charts-tooltip` for the entire tooltip container.
- `ag-charts-tooltip-heading` and `ag-charts-tooltip-title` for the tooltip headings and titles.
- `ag-charts-tooltip-symbol` for the series symbol.
- `ag-charts-tooltip-label` and `ag-charts-tooltip-value` for the elements in the data rows.

Adding custom CSS to these will change the styling of all the tooltips in your app.

```css
.ag-charts-tooltip {
    background-color: papayawhip;
    border: 2px solid peachpuff;
    color: maroon;
}

.ag-charts-tooltip-heading {
    font-weight: bold;
}
```

Note that your styles don't override the default tooltip styles but complement them.

### Modifying Content

The tooltip's content can be customised within the default template by using a `renderer` callback function.

#### Modifying Tooltip Content

```ts
import {
  AgCartesianSeriesTooltipRendererParams,
  AgChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";

function renderer({
  datum,
  yKey,
  yName,
}: AgCartesianSeriesTooltipRendererParams<DataType>) {
  return {
    heading: "Clothing Production",
    title: yName?.toUpperCase(),
    data: [
      {
        label: datum.month,
        value: Number(datum[yKey]).toFixed(1),
      },
    ],
  };
}
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgChartOptions<DataType> = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "month",
      tooltip: { renderer },
      yKey: "sweaters",
      yName: "Sweaters made",
      stacked: true,
    },
    {
      type: "bar",
      xKey: "month",
      tooltip: { renderer },
      yKey: "hats",
      yName: "Hats made",
      stacked: true,
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Modifying Tooltip Content](https://www.ag-grid.com/charts/typescript/tooltips/examples/tooltip-content-title)

```js
{
    tooltip: {
        renderer: function ({ datum, xKey, yKey, yName }) {
            return {
                heading: 'Clothing Production',
                title: yName.toUpperCase(),
                data: [
                    {
                        label: datum[xKey],
                        value: datum[yKey].toFixed(1),
                    },
                ],
            };
        },
    },
}
```

In this configuration:

- The `renderer` receives values associated with the highlighted data point. The actual type of the `params` object passed into the tooltip renderer will depend on the series type being used.
- The `renderer` returns an object with optional `heading`, `title`, `symbol`, and `data` fields.
- The `heading` and `title` must be plain text.
- The `data` field consists of an array of `label` and `value` fields, which are both plain text.
- Returning an empty string for any field will cause it to be omitted from the rendered tooltip.

### Modifying the Symbol

The tooltip symbol (the coloured marker that represents the series) can be customised using the `symbol` property in the renderer's return object.

Whether the symbol defaults to use a `marker`, `line`, or both depends on the series type and options used. Use the `enabled` option for each element to override this.

#### Customising the Tooltip Symbol

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AllCommunityModule,
  ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";

let symbolEnabled = true;
ModuleRegistry.registerModules(AllCommunityModule);

const options: AgCartesianChartOptions = {
  data: getData(),
  title: { text: "Monthly Temperatures" },
  series: [
    {
      type: "line",
      xKey: "month",
      yKey: "temperature",
      yName: "Temperature",
      tooltip: {
        renderer: () => {
          return {
            symbol: {
              marker: {
                enabled: symbolEnabled,
                shape: "star",
                fill: "#cc0000",
              },
              line: {
                enabled: symbolEnabled,
                stroke: "#ff6b00",
              },
            },
          };
        },
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function toggleSymbol() {
  symbolEnabled = !symbolEnabled;
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleSymbol = toggleSymbol;
}
```

[Live example: Customising the Tooltip Symbol](https://www.ag-grid.com/charts/typescript/tooltips/examples/tooltip-symbol)

```js
{
    tooltip: {
        renderer: function () {
            return {
                symbol: {
                    marker: {
                        enabled: true,
                        shape: 'star',
                        fill: '#cc0000',
                    },
                    line: {
                        enabled: true,
                        stroke: '#ff6b00',
                    },
                },
            };
        },
    },
}
```

In this example:

- Click the button to toggle the symbol. This will take effect on the next hover.
- The `marker` shape has been changed to `'star'` instead of inheriting the circle shape from the series.
- The marker and line colours have been changed from those used in the series.

### Using Custom Tooltips

To use a completely custom tooltip instead of modifying the contents of the default tooltip template, return an HTML string to the `renderer` including all the markup required.

#### Column Series with Tooltip Renderer

```ts
import {
  AgBarSeriesTooltipRendererParams,
  AgChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";

function renderer(params: AgBarSeriesTooltipRendererParams<DataType>) {
  const { datum, fill, yKey } = params;
  return (
    '<div class="my-tooltip" style="--color:' +
    fill +
    '">' +
    datum.month +
    "&nbsp;&#10172;&nbsp;" +
    Number(datum[yKey]).toFixed(0) +
    "</div>"
  );
}
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgChartOptions<DataType> = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "month",
      tooltip: { renderer },
      yKey: "sweaters",
      yName: "Sweaters made",
      stacked: true,
    },
    {
      type: "bar",
      xKey: "month",
      tooltip: { renderer },
      yKey: "hats",
      yName: "Hats made",
      stacked: true,
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Column Series with Tooltip Renderer](https://www.ag-grid.com/charts/typescript/tooltips/examples/tooltip-renderer)

```js
{
    series: [
        {
            type: 'bar',
            tooltip: {
                renderer: function (params) {
                    return (
                        '<div class="my-tooltip" style="--color:' +
                        params.fill +
                        '">' +
                        params.datum[params.xKey] +
                        '&nbsp;&#10172;&nbsp;' +
                        params.datum[params.yKey].toFixed(0) +
                        '</div>'
                    );
                },
            },
        },
    ],
}
```

In this configuration:

- The `renderer` receives values associated with the highlighted data point. The actual type of the `params` object passed into the tooltip renderer will depend on the series type being used.
- The `renderer` returns a single HTML string.
- The text gets its colour from the `fill` property in the `params` object. This matches the colour of the series.
- The label comes from `params.datum[params.xKey]` which is the name of the month.
- The value comes from the `params.datum[params.yKey]`, which we then stringify as an integer via `toFixed(0)`.
- We used a custom class names on the returned `div` element, so that we can apply custom styling.

## Tooltip Range

The `tooltip.range` property specifies how near the cursor must be to a node for the tooltip to appear. This can be defined on each series, as well as on the chart level.

#### Tooltip Range

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  tooltip: {
    range: "nearest",
  },
  data: getData(),
  series: [
    {
      type: "line",
      xKey: "month",
      yKey: "value1",
      yName: "Sweaters Made",
    },
    {
      type: "line",
      xKey: "month",
      yKey: "hats_made",
      yName: "Hats Made",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function nearest() {
  options.tooltip = { range: "nearest" };

  chart.update(options);
}

function exact() {
  options.tooltip = { range: "exact" };

  chart.update(options);
}

function distance() {
  options.tooltip = { range: 10 };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).nearest = nearest;
  (<any>window).exact = exact;
  (<any>window).distance = distance;
}
```

[Live example: Tooltip Range](https://www.ag-grid.com/charts/typescript/tooltips/examples/interaction-range)

Options for `tooltip.range` are:

- `'nearest'` - Always shows the tooltip of the nearest node. This is the default for marker-based series such as `line` and `scatter`.
- `'exact'` - Only shows the tooltip when the user hovers over a node. This is the default for shape-based series such as `bar` and `pie`.
- An integer - Only shows the tooltip when the cursor is within the specified pixel distance of a node.

## Interaction with Tooltips

#### Tooltip Interaction

```ts
import {
  AgBarSeriesTooltipRendererParams,
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";

function renderer(params: AgBarSeriesTooltipRendererParams<DataType>) {
  return `<div class="tooltip">
        <div class="tooltip-title">
            ${params.datum[params.xKey]}: ${params.datum[params.yKey]}
        </div>
        <div class="tooltip-body">
            <a tabindex="0" href="#" onclick="console.log('Clicked within a tooltip')">Click here</a>
        </div>
    </div>`;
}
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions<DataType> = {
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "month",
      yKey: "sweaters",
      yName: "Sweaters Made",
      tooltip: {
        renderer,
        interaction: {
          enabled: true,
        },
      },
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Tooltip Interaction](https://www.ag-grid.com/charts/typescript/tooltips/examples/tooltip-interaction)

By default, you cannot hover over a tooltip or select its text.

Set the `series[].tooltip.interaction.enabled` flag to `true` to enable selecting the text and clicking links within the tooltip.

## API Reference

#### Chart Tooltip Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enabled | boolean |  | Set to `false` to disable tooltips for all series in the chart. |
| mode | 'single' \| 'shared' \| 'compact' |  | Group multiple series into the same tooltip |
| showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. This will be used unless overridden by the series `tooltip.range` option. |
| position | AgTooltipPositionOptions |  | The position of the tooltip. This will be used unless overridden by the series `tooltip.range` option. |
| position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| pagination | boolean |  | The configuration for tooltip pagination. |
| delay | DurationMs |  | The time interval (in milliseconds) after which the tooltip is shown. |
| wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'hyphenate' | Text wrapping strategy for tooltips. - `'always'` will always wrap text to fit within the tooltip. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the tooltip dimensions, the text will be truncated. - `'never'` disables text wrapping. |

#### Series Tooltip Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enabled | boolean |  | Whether to show tooltips when the series are hovered over. |
| showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. |
| position | AgTooltipPositionOptions |  | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. |
| position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| interaction | AgSeriesTooltipInteraction |  | Configuration for tooltip interaction. |
| interaction.enabled (required) | boolean |  | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text |
| renderer | Renderer |  | Function used to create the content for tooltips. |