How to add tooltip with eclipse in legend in line chart in D3.js

I want to add eclipse with tooltip in Legend in Line chart in D3.js

I attached my working JSFiddle with Legend here

var legend = svg.append("g")
  .attr("class", "legend")
  .attr("height", 100)
  .attr("width", 100).attr('transform', 'translate(-20,0)');


Not able to set eclipse with tooltip if Legend name is too long

I need like this enter image description here

I search here but all examples I found for word wrap in Legend so please help me to set eclipse with tooltip.


You need to use substring to show few characters of legend and then append a title. It will be like below. I modified your legend text part.

      .attr("x", width - 140)
      .attr("y", function (d, i) { return i * 20 + 9; })
      .text(function (d, i) {
        var text = d.materialName;
        return text.substring(0,20)+ "...";
      .style("font-size", "10px")
      .append('title').text(function (d, i) {
        var text = d.materialName;
        return text;

enter image description here