Skip to content
Simple text-based tooltips for d3.js
Find file
Pull request Compare This branch is 218 commits behind Caged:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Simple SVG Tooltips for d3.js - ALPHA QUALITY

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).


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

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


  • Left orientation
  • Right orientation
  • Reorient when tip exceeds document bounds
  • docs
  • Auto orientation
  • svg content in tip
  • type - specify if tooltip is sticky.
Something went wrong with that request. Please try again.