# react-d3-tooltip
[](https://gemnasium.com/react-d3/react-d3-tooltip)
`react-d3` tooltip implementation.
## Quick example
#### With webpack build tool
- line chart
```js
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var LineTooltip = require('react-d3-tooltip').LineTooltip;
(function() {
var generalChartData = require('json!./data/user.json');
var chartSeries = [
{
field: 'age',
name: 'Age',
color: '#ff7f0e'
}
],
x = function(d) {
return d.index;
}
ReactDOM.render(
, document.getElementById('data_tooltip_line')
)
})()
```
#### In html (without build tools)
Clone code `react-d3-tooltip.js` or minify js `react-d3-tooltip.min.js` and include the script in your HTML.
You'll also need `react`, `react-dom`, `d3`
```html
Line Chart example
```
### Customization
Choose one of the components in [tooltip folder](https://github.com/react-d3/react-d3-tooltip/tree/master/src/tooltip).
Then require it in your project, take `simple` as example.
After you require it, render the tooltip as children. Like below example.
```js
var SimpleTooltipStyle = require('react-d3-tooltip').SimpleTooltip;
ReactDOM.render(
//<---------
, document.getElementById('data_tooltip_line_multi')
)
```
Then you can change tooltip style!
## Install
```
npm install --save react-d3-tooltip
```
## Support Tooltip Component
- Line Chart: export as `LineTooltip`
- Area Stack Chart: export as `AreaStackTooltip`
- Scatter Plot: export as `ScatterTooltip`
- Bar Chart: export as `BarTooltip`
- Bar Stack: export as `BarStackTooltip` (you can now pass in onClick handler via props)
- Bar Group: export as `BarGroupTooltip`
- Pie Chart: export as `PieTooltip`
## Gallery
## License
Apache 2.0