https://github.com/vega/vega-tooltip
Tooltip Plugin for Vega-Lite
https://github.com/vega/vega-tooltip
tooltip-handler tooltip-plugin vega vega-lite
Last synced: 5 months ago
JSON representation
Tooltip Plugin for Vega-Lite
- Host: GitHub
- URL: https://github.com/vega/vega-tooltip
- Owner: vega
- License: bsd-3-clause
- Created: 2016-02-20T00:33:03.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2025-05-09T12:54:05.000Z (5 months ago)
- Last Synced: 2025-05-09T14:01:19.274Z (5 months ago)
- Topics: tooltip-handler, tooltip-plugin, vega, vega-lite
- Language: TypeScript
- Homepage: http://vega.github.io/vega-tooltip/
- Size: 13.8 MB
- Stars: 81
- Watchers: 16
- Forks: 47
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Tooltip for Vega & Vega-Lite
[](https://www.npmjs.com/package/vega-tooltip)
[](https://github.com/vega/vega-tooltip/actions)
[](https://codecov.io/gh/vega/vega-tooltip)
[](https://www.jsdelivr.com/package/npm/vega-tooltip)
[](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/).
**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
```
## 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`.