A reusable tooltip plug-in for d3v4
npm install d3-cooltip> An easy-to-use reusable tooltip plugin for d3v4
 
- Easy-to-use programming interface
- Border detection to keep cooltips inside parent DIV/SVG
- Multi-line support
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
Code is licensed under Apache License Version 2.0.