custom qtip tooltips on d3 standard tooltips on text

angled text truncation: add text

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 = "12345678901234567890";
var width = 400;
var height = 400;
var margin = {
  left: 30,
  top: 30,
  bottom: 10,
  right: 250
};
var tooltipOptions;

svg.append("text")
        .attr("x", (width / 2))           
        .attr("y", 40)
        .attr("text-anchor", "middle")
        .style("font-size", "16px")
        .style("text-decoration", "underline")
        .text(dataSet)
        
        .attr("class", "truncText")
        .attr("id", "truncText1")
        .attr("transform", "rotate(315)");


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