JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<svg id="demo" width="400" height="300"></svg>
<div id="overlay"></div>

CSS

</style> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/palantir/plottable/develop/plottable.css"> <style type="text/css">
/*-- Add custom styles after this line --*/
body { background-color: #AAA; }
svg.plottable { background-color: #FFF; }

.tooltip {
  pointer-events: none;
}

#overlay {
	position: absolute;
	top: 150px;
	left: 150px;
	width: 300px;
	height: 300px;
	background-color: black;
	opacity: 0.5;
}

JavaScript

window.onload = function() {
	var series1 = new Plottable.Dataset(data);

	xScale = new Plottable.Scales.Linear();
	xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
	yScale = new Plottable.Scales.Linear();
	yAxis = new Plottable.Axes.Numeric(yScale, "left");

	plot = new Plottable.Plots.Scatter();
	plot.addDataset(series1);
	plot.x(function(d) { return d.x; }, xScale);
	plot.y(function(d) { return d.y; }, yScale);

	chart = new Plottable.Components.Table([
		[yAxis, plot],
		[null, xAxis],
	]);
	chart.renderTo("#demo");

	var tooltipAnchor = plot.foreground().append("circle").attr({
		r: 3,
		fill: "pink",
		opacity: 0
	});
	$tooltipAnchor = $(tooltipAnchor.node());
	$tooltipAnchor.tooltip({
		animation: false,
		container: "body",
		placement: "auto",
		title: "text",
		trigger: "manual"
	});
	var pointer = new Plottable.Interactions.Pointer();
	var lastPosition = { x: -1, y: -1 };
	function cardinalize(num) {
		switch(num%10) {
			case 1:
				return num+"st";
			case 2:
				return num+"nd";
			case 3:
				return num+"rd";
			default:
				return num+"th";
		}
	}
	pointer.onPointerMove(function(p) {
		var closest = plot.entityNearest(p);
		if (closest) {
			if (closest.position.x !== lastPosition.x || closest.position.y !== lastPosition.y) {
				tooltipAnchor.attr({
					cx: closest.position.x,
					cy: closest.position.y,
					"data-original-title": +closest.index
				});
				$tooltipAnchor.tooltip("show");
				lastPosition = closest.position;
			}
		}
	});
	pointer.onPointerExit(function() {
		lastPosition = { x: -1, y: -1 };
		$tooltipAnchor.tooltip("hide");
	});
	pointer.attachTo(plot);
};

var data = [
	{ x: 1, y: 1 },
	{ x: 2, y: 1 },
	{ x: 3, y: 2 },
	{ x: 4, y: 3 },
	{ x: 5, y: 5 },
	{ x: 6, y: 8 }
];