How to enable qtip2 in Piechart made by Plottable.js / D3.js

Question

I have this code that tried to include qtip in the plottable.js file

var store = [{ Name:"Item 1", Total:18.73424242 },
               { Name:"Item 2", Total:7.34311 },
               { Name:"Item 3", Total:3.1235535},
               { Name:"Item 4", Total:12.763574}];
  

  var colorScale = new Plottable.Scales.Color();
  var legend = new Plottable.Components.Legend(colorScale);

  var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d){ return d.Name; }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .attr("qtip2-title", function(d) { return '<div class="bartip">' + d.Name + " (" + d.Total.toFixed(2) + ')</div>'; })
  .addClass("tooltipped")
  .sectorValue(function(d){ return d.Total; } )
  .labelsEnabled(true);
 

    
    
  new Plottable.Components.Table([[pie, legend]]).renderTo("#chart");


/*
// Adding this block does not work
$(".tooltipped rect").qtip({
              overwrite: true,
              content: {
              text: function() {
                return $(this).attr("qtip2-title");
                    }
             },

                position: {
                  my: "bottom middle",
                  at: "top middle"
                },
                style: {
                   classes: "qtip-light"
                }
          });
          
   */

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>

<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

Run codeHide result

As you noticed, the qtip2 Javascript code does not seem to work. How can I make it work?

Answer 1

Step 1

You will need to enable jQuery since qTip is dependent on jQuery.

Step 2

Save the tooltip information inside some attribute, here I use the name of the attribute name

.attr("title", function(d) {
    return "" + d.Total.toFixed(2);//storing the tooltip info in attribute title
  })

Add a class bound to the path.

  .attr("class", "tooltipped")

Step 3

Using a jQuery selector to append this to an entire path that has a class tooltipped

// Adding this block which will work
//selector to select all path with class tooltipped
$(".tooltipped").qtip({
  overwrite: true,
  content: {
    text: function(d) {
      return ($(this).attr("title"));//returning the tooltip
    }
  },

  position: {
    at: "top middle"
  },
  style: {
    classes: "qtip-light"
  }
});

:

var store = [{
  Name: "Item 1",
  Total: 18.73424242
}, {
  Name: "Item 2",
  Total: 7.34311
}, {
  Name: "Item 3",
  Total: 3.1235535
}, {
  Name: "Item 4",
  Total: 12.763574
}];


var colorScale = new Plottable.Scales.Color();
var legend = new Plottable.Components.Legend(colorScale);

var pie = new Plottable.Plots.Pie()
  .attr("fill", function(d) {
    return d.Name;
  }, colorScale)
  .addDataset(new Plottable.Dataset(store))
  .attr("title", function(d) {
    return "" + d.Total.toFixed(2);//storing the tooltip info in attribute title
  })
  .attr("class", "tooltipped")
  .sectorValue(function(d) {
    return d.Total;
  })
  .labelsEnabled(true);




new Plottable.Components.Table([
  [pie, legend]
]).renderTo("#chart");



// Adding this block does not work
//selector to select all path with class tooltipped
$(".tooltipped").qtip({
  overwrite: true,
  content: {
    text: function(d) {
      return ($(this).attr("title"));//returning the tooltip
    }
  },

  position: {
    at: "top middle"
  },
  style: {
    classes: "qtip-light"
  }
});

<link href="https://rawgithub.com/palantir/plottable/develop/plottable.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>


<div id="container">
  <svg id="chart" width="350" height="350"></svg>
</div>

Hide result