Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
HTML JavaScript CSS

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

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.
Something went wrong with that request. Please try again.