Simple text-based tooltips for d3.js
Pull request Compare This branch is 229 commits behind Caged:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples
src
vendor
README.md
d3.tip.min.js

README.md

Simple SVG Tooltips for d3.js

Pure SVG tooltips for d3.js. ~3kb compressed, ~7k original.

  • Familiar API - Modeled after the d3 API.
  • SVG - It's all svg, no hacks
  • Text only - Currently supports simple text values in tooltips
  • Styleable - Use any svg styling support (dashed borders, etc).

Usage

// Setup
tip = d3.svg.tip().text(function(d) { return d; });

// Usage
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)

TODO

  • Left orientation
  • Right orientation
  • Reorient when tip exceeds document bounds
  • docs
  • Auto orientation
  • svg content in tip
  • type - specify if tooltip is sticky.