Add tooltip on D3s x axis tick labels

Question

I am using the d3.svg.axis() function in order to draw the x axis of my barchart. As the labels on the axis can be very long, I need to cut them (to let's say four letters) and display the rest as tooltip. I would like to make use of svg:title, as the browser will take care of displaying the tooltip then. Any idea how I can achieve this? How can I add a title element on each label on the x axis ticks?

Many Thanks!

Answer 1

Should be as simple as:

// tooltip
d3.selectAll('.x.axis>.tick') // gs for all ticks
  .append('title') // append title with text
  .text(function(d){
    return d;
});

Example here.