JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id ="ResizableContainer" class="ui-widget-content" style="width:300px;height:150px;">
<div id="placeholder" class="graph-placeholder"></div>
</div>
<table border='0' cellpadding='5'><tr><td><div style="background-color: #333; min-height: 5px; min-width: 5px;"></div></td><td>Basket Name</td> <td><b>197.02</b></td></tr><tr><td></td><td>Benchmark</td> <td><b>147.52</b></td></tr></table>
CSS
.graph-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
padding: 0;
position: relative;
}
JavaScript
var plot;
$(function() {
//Add tooltip
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var hoverSeries = item.series;
var x = item.datapoint[0],
y = item.datapoint[1];
var strTip = x + " / " + y + " for " + item.series.label;
var allSeries = plot.getData();
$.each(allSeries, function(i,s){
if (s == hoverSeries) return;
$.each(s.data, function(j,p){
if (p[0] == x){
strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
}
});
});
showTooltip(item.pageX, item.pageY, strTip);
}
});
var d3 = [[0, 1], [1, 2], [2, 3],[3, 4]];
var d2 = [[-1, 0],[0, 1], [1, 2], [2, 3]];
var data = [
{
label: 'data2',
color:1,
data: d2
},
{
label: 'data3',
color:2,
data: d3
}];
var conf = {
lines: { show: true },
points: { show: true },
grid: { hoverable: true, clickable: true },
};
plot = $.plot($('#placeholder'), data, conf);
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200).fadeOut(6000);
}