# Tooltips (maintained) (`@stklcode/chartist-plugin-tooltips`, Chartist plugin)

> Shows a tooltip with the value and meta data on hover. A maintained version of the tooltips plugin, written for 1.x, with an ES module build.

- Author: Stefan Kalscheuer
- Source: https://github.com/stklcode/chartist-plugin-tooltip, npm: https://www.npmjs.com/package/@stklcode/chartist-plugin-tooltips
- License: MIT
- Written for the Chartist 1.x API; runs on v2 with `chartist/compat` (an ES module)
- Charts: line, bar, pie
- Server rendering: no, it needs a browser
- Downloads: 811 a month, last release 2026-09-20

Setup:

```ts
// npm install chartist@next @stklcode/chartist-plugin-tooltips
import { lineChart } from 'chartist';
import { fromLegacyPlugin } from 'chartist/compat';
import plugin from '@stklcode/chartist-plugin-tooltips';
import 'chartist/styles.css';
import '@stklcode/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css';

lineChart('#chart', data, { plugins: [fromLegacyPlugin(plugin, {})] });
```

Example (`src/main.ts`):

```ts
import 'chartist/styles.css';
import { barChart } from 'chartist';
import { fromLegacyPlugin } from 'chartist/compat';
import ChartistPluginTooltip from '@stklcode/chartist-plugin-tooltips';

barChart(
  '#chart',
  {
    labels: ['North', 'East', 'South', 'West'],
    series: [
      [
        { meta: 'North', value: 320 },
        { meta: 'East', value: 450 },
        { meta: 'South', value: 280 },
        { meta: 'West', value: 390 }
      ]
    ]
  },
  {
    plugins: [
      fromLegacyPlugin(ChartistPluginTooltip, {
        transformTooltipTextFnc: (value: string) => `${value} visitors`
      })
    ]
  }
);
```

All plugins: https://chartist.dev/plugins.md