https://github.com/Caged/d3-tip

d3 tooltips
https://github.com/Caged/d3-tip

d3 datavis tooltips

Last synced: about 1 month ago
JSON representation

d3 tooltips

• Host: GitHub
• URL: https://github.com/Caged/d3-tip
• Owner: caged
• License: mit
• Archived: true
• Created: 2012-01-07T22:22:34.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2020-02-16T23:36:24.000Z (almost 5 years ago)
• Last Synced: 2024-10-29T14:31:18.471Z (about 2 months ago)
• Topics: d3, datavis, tooltips
• Language: JavaScript
• Homepage: http://labratrevenge.com/d3-tip
• Size: 476 KB
• Stars: 1,222
• Watchers: 43
• Forks: 351
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-d3 - d3-tip - Tooltip helper (Utils)
• awesome-d3 - d3-tip - Tooltip helper (Utils)

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

```