A tooltip plugin for Vega and Vega-Lite visualizations. This plugin implements a custom tooltip handler for Vega that uses custom HTML tooltips instead of the HTML title
attribute.
http://vega.github.io/vega-tooltip/
Use npm install vega-tooltip
or yarn add vega-tooltip
.
You can import vega-tooltip
directly from jsDelivr
. Replace [VERSION]
with the version that you want to use.
<!-- Import Vega 3 & Vega-Lite 2 (does not have to be from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@[VERSION]"></script>
The simplest example is to use Vega-Embed.
vegaEmbed("#vis", spec)
.then(function(result) {
vegaTooltip.default(result.view);
})
.catch(console.error);
See the API documentation for details.
- In the project folder
vega-tooltip
, type commandyarn
to install dependencies. - Then, type
yarn start
. This will build the library and start a web server. - In your browser, navigate to
http://localhost:8000/
, where you can see various Vega-Lite and Vega visualizations with tooltip interaction.