# vega-tooltip

> A tooltip plugin for Vega-Lite and Vega visualizations.

Latest version **1.1.0** (published 2025-09-18) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install vega-tooltip
pnpm add vega-tooltip
yarn add vega-tooltip
bun add vega-tooltip
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2025-09-18 |
| First published | 2016-08-19 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 54.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 88 |
| Author | Vega |
| Maintainers | jheer, domoritz, kanitw, arvindsatya1, lhermann |
| Keywords | vega-lite, vega, tooltip |

## Links

- npm: https://www.npmjs.com/package/vega-tooltip
- Repository: https://github.com/vega/vega-tooltip
- Homepage: https://github.com/vega/vega-tooltip#readme
- Issues: https://github.com/vega/vega-tooltip/issues
- Funding: https://app.hubspot.com/payments/GyPC972GD9Rt
- npm.io page: https://npm.io/package/vega-tooltip

## Dependencies (1)

- [vega-util](https://npm.io/package/vega-util.md) ^2.1.0

## Recent versions

- 1.1.0 (latest) — 2025-09-18
- 1.0.0-alpha.5 (next) — 2025-02-11
- 0.29.1--canary.717.1dd1a25.0 (canary) — 2022-11-18
- 0.2.0 (pre) — 2017-04-18
- 1.0.0 — 2025-03-27
- 1.0.0-alpha.4 — 2025-02-07
- 1.0.0-alpha.3 — 2025-02-07
- 1.0.0-alpha.2 — 2025-02-07
- 1.0.0-alpha.1 — 2025-02-07
- 0.35.2 — 2024-11-16
- 0.35.1 — 2024-11-05
- 0.35.0 — 2024-11-05
- 0.34.0 — 2023-12-18
- 0.33.0 — 2023-08-07
- 0.32.0 — 2023-04-20
- … 89 more at https://npm.io/package/vega-tooltip/versions

## README

# Tooltip for Vega & Vega-Lite
[![npm version](https://img.shields.io/npm/v/vega-tooltip.svg)](https://www.npmjs.com/package/vega-tooltip)
[![Build Status](https://github.com/vega/vega-tooltip/workflows/Test/badge.svg)](https://github.com/vega/vega-tooltip/actions)
[![codecov](https://codecov.io/gh/vega/vega-tooltip/branch/master/graph/badge.svg)](https://codecov.io/gh/vega/vega-tooltip)
[![](https://data.jsdelivr.com/v1/package/npm/vega-tooltip/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vega-tooltip)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=rounded)](https://github.com/prettier/prettier)

A tooltip plugin for [Vega](http://vega.github.io/vega/) and [Vega-Lite](https://vega.github.io/vega-lite/) visualizations. This plugin implements a [custom tooltip handler](https://vega.github.io/vega/docs/api/view/#view_tooltip) for Vega that uses custom HTML tooltips instead of the HTML [`title` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title). Vega Tooltip is installed in the [Vega Editor](https://vega.github.io/editor/).

![demo image](demo.png "a tooltip for a Vega-Lite scatterplot")

**Features**
* Renders nice tooltips for Vega and Vega-Lite charts
* Supports dark and light theme
* Renders object-valued tooltips as a table
* Supports special keys `title` (becomes the title of the tooltip) and `image` (used as the url for an embedded image)

## Demo

http://vega.github.io/vega-tooltip/

## Installing

We recommend using [Vega-Embed](https://github.com/vega/vega-embed), which already comes with this tooltip plugin.

You can install Vega tooltip directly with `npm install vega-tooltip`.

### Using Vega-tooltip with a CDN

You can import `vega-tooltip` directly from [`jsDelivr`](https://www.jsdelivr.com/package/npm/vega-tooltip). Replace `[VERSION]` with the version that you want to use.

```html
<!-- Import Vega 5 & Vega-Lite 4 (does not have to be from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>

<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@[VERSION]"></script>
```

## Usage and APIs

If you use [Vega-Embed](https://github.com/vega/vega-embed), you **don't need to install Vega Tooltip**! Vega Embed already comes with Vega Tooltip. You can however pass tooltip customizations.

```js
vegaEmbed("#vis", spec, {tooltip: {theme: 'dark'}})
  .then(function(result) {
    // result.view contains the Vega view
  })
  .catch(console.error);
```

If you want to use a different version of the tooltip handler, you can override the default handler with the handler from Vega Tooltip (and you need to install it separately).

```js
var handler = new vegaTooltip.Handler();
vegaEmbed("#vis", spec, {tooltip: handler.call})
  .then(function(result) {
    // result.view contains the Vega view
  })
  .catch(console.error);
```

See the [API documentation](docs/APIs.md) for details.

## Tutorials

1. [Creating Your Tooltip](docs/creating_your_tooltip.md)
2. [Customizing Your Tooltip](docs/customizing_your_tooltip.md)

## Run Instructions

1. In the project folder `vega-tooltip`, type command `npm i` to install dependencies.
2. Then, type `npm run start`. This will build the library and start a web server.
3. In your browser, navigate to `http://localhost:8000/`, where you can see various Vega-Lite and Vega visualizations with tooltip interaction.

## Publishing

To make a release, run `npm run release`. The update the website with `npm run deploy:gh`.

---
_Source: https://npm.io/package/vega-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._