# d3-tip

> Tooltips for d3 svg visualizations

Latest version **0.9.1** (published 2018-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install d3-tip
pnpm add d3-tip
yarn add d3-tip
bun add d3-tip
```

## Health

**Score 28/100 (F)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2018-05-10 |
| First published | 2014-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/d3-tip) |
| Module format | ESM + CommonJS |
| Node | >=4.2.6 |
| Dependencies | 2 |
| Unpacked size | 20.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1209 |
| Author | Justin Palmer |
| Maintainers | caged, vdh |
| Keywords | d3, tooltip |

## Links

- npm: https://www.npmjs.com/package/d3-tip
- Repository: https://github.com/Caged/d3-tip
- Issues: https://github.com/Caged/d3-tip/issues
- npm.io page: https://npm.io/package/d3-tip

## Dependencies (2)

- [d3-selection](https://npm.io/package/d3-selection.md) ^1.3.0
- [d3-collection](https://npm.io/package/d3-collection.md) ^1.0.4

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.9.1 (latest) — 2018-05-10
- 0.8.0-alpha.1 (next) — 2016-09-22
- 0.6.8 (d3v3) — 2016-08-24
- 0.9.0 — 2018-05-01
- 0.7.1 — 2016-08-23
- 0.6.7 — 2014-12-04

## README

# d3.tip: Tooltips for d3.js visualizations

[![](https://github-images.s3.amazonaws.com/skitch/Screen_Shot_2013-04-08_at_11.40.10_AM-20130408-114054.png)](http://bl.ocks.org/Caged/6476579)

* [See a live demo](http://bl.ocks.org/Caged/6476579)
* [Example code](/examples)

### API Docs
See the [API Documentation](docs/index.md)

### Download Latest Version
* [Development Version](https://raw.github.com/Caged/d3-tip/master/index.js) : **6kb** / **~2kb gzipped**

### Install with NPM
```
npm install d3-tip
```

### Quick Usage
```javascript
/* Initialize tooltip */
tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

/* Invoke the tip in the context of your visualization */
vis.call(tip)

vis.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('width', function() { return x.rangeBand() })
  .attr('height', function(d) { return h - y(d) })
  .attr('y', function(d) { return y(d) })
  .attr('x', function(d, i) { return x(i) })
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)
```

If you want basic styling, you can include `example-styles.css` using a service like
rawgithub.com.

```html
<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
```

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