d3-cooltip

> An easy-to-use reusable tooltip plugin for d3v4

!alt text

 

Main features

- Easy-to-use programming interface
- Border detection to keep cooltips inside parent DIV/SVG
- Multi-line support

Usage

Include library in your header. d3v4 is required as well.

``html


`

Write a selector callback to define what the cooltip should display from your data. You can use \n-style linebreaks.

`javascript
var cooltipText = function(d) {
return "This rectangle is\ncolored " + d["value"]
}
`

Then create a new cooltip instance and configure it programmatically.

`javascript
var cooltip = d3.cooltip()
.opacity(0.7)
.padding(10)
.color("lightgrey")
.fill("black")
.roundCorners(10)
.lineHeight(25)
.selector(cooltipText)
`

Check out the documented source file to learn about possible options. You can style cooltips via CSS as well.

`css

`

Finally invoke a function call for any element you want to provide with your cooltip.

`javascript
svg.selectAll(".rectangles").call(cooltip)
`

A complete example is contained inside this repository. You can run it with..

`shell
npm install
sudo npm install -g http-server
http-server
``

.. and then opening in your browser.

License

Code is licensed under Apache License Version 2.0.