JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://plottablejs.org/assets/css/application.min.css">
<link rel="stylesheet" href="http://plottablejs.org/assets/lib/plottable.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="http://plottablejs.org/assets/lib/plottable.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<svg width="600px" height="350px" id="example"></svg>

CSS

.tooltip {
  /* keep tooltips from blocking interactions */
  pointer-events: none;
}

JavaScript

// Code for rendering a bar chart
var data = [
  { x: 1, y: 5 },
  { x: 2, y: 8 },
  { x: 3, y: 7 }
];
var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Linear();
var plot = new Plottable.Plots.Line()
  .x(function(d) { return d.x; }, xScale)
  .y(function(d) { return d.y; }, yScale)
  .addDataset(new Plottable.Dataset(data))
  .renderTo("svg#example");

// Initializing tooltip anchor
var tooltipAnchorSelection = plot.foreground().append("circle").attr({
  r: 3,
  opacity: 0
});

var tooltipAnchor = $(tooltipAnchorSelection.node());
tooltipAnchor.tooltip({
  animation: false,
  container: "body",
  placement: "auto",
  title: "text",
  trigger: "manual"
});
 
// Setup Interaction.Pointer
var pointer = new Plottable.Interactions.Pointer();
pointer.onPointerMove(function(p) {
  var closest = plot.entityNearest(p);
  if (closest) {
    tooltipAnchor.attr({
      cx: closest.position.x,
      cy: closest.position.y,
      "data-original-title": "Value: " + closest.datum.y
    });
    tooltipAnchor.tooltip("show");
  }
});

pointer.onPointerExit(function() {
  tooltipAnchor.tooltip("hide");
});

pointer.attachTo(plot);