custom qtip tooltips on d3 standard tooltips on x-axis

add tooltips to x-axis

by David McClelland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.js"></script>
<svg></svg>

CSS

* {
  margin: 10;
  padding: 10;
  border: 0;
}

body {
  background: #ffd;
  font: 10px sans-serif;
}

svg {
  width: 640px;
}


/* bar chart styling begins */

.axis path,
.axis line {
  fill: none;
  stroke: #ddd;
  /* change grid lines color here*/
  shape-rendering: crispEdges;
}

.y .tick {
  stroke: #ddd;
  stroke-width: 0;
  stroke-dasharray: 3;
}

.x .tick {
  stroke: #ddd;
  stroke-width: 0;
}

.axis text {
  font: 10px sans-serif;
}

.tooltip {
  font-family: arial;
  background-color: gold;
  font-size: 10px;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 3px;
}

JavaScript

var svg = d3.select('svg');
var dataSet = [40, 20, 30, 40, 10];
var width = 400;
var height = 400;
var margin = {
  left: 30,
  top: 30,
  bottom: 10,
  right: 250
};
var tooltipOptions;

var circle = svg.selectAll('circle')
  .data(dataSet)
  .enter()
  .append('circle')
  .attr({
    r: function(d) {
      return d
    },
    cx: function(d, i) {
      return (i * 100) + dataSet[0]
    },
    cy: 60,
    fill: 'red'
  });

d3.selectAll("circle")
  .each(function(i) {
    var circle = d3.select(this);
    circle
      .append("title")
      //adding a tooltip appended with the dataSet value for each iter
      .text("Tooltip " + i)
  });

var x = d3.scale.linear()
  .domain([0, 100])
  .range([0, width]);

xAxis = d3.svg.axis().scale(x).orient("middle").ticks(10);

// append x axis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(" + margin.left + ", 110)")
  .call(xAxis.tickFormat(function(d) {
    return d.toFixed(0);
  }));
// tooltip by title attr
d3.selectAll(".axis text")
  .each(function(i) {
    var tick = d3.select(this);
    tick
      .append("title")
      .text("Tooltip " + tick.text());
  });

// qtip jquery extension over titles in d3 axis

var tooltipOptions = {
  id: 'id',
  style: {
    classes: 'qtip'
  },
  show: {
    delay: 100
  },
  position: {
    at: 'bottom center',
    my: 'top center',
    adjust: {
      y: 10
    },
    viewport: $(window)
  },
  content: {
    text: function(event, api) {
      var tooltipField = 'qtip tooltip';
      return tooltipField;
    }
  }
};

tooltipOptions = $.extend({}, tooltipOptions, tooltipOptions);

$(d3.selectAll(".axis text")).qtip(tooltipOptions);