jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<div id="plot-1" class="plot"></div>
<div id="plot-2" class="plot"></div>
<div id="tooltip"></div>

CSS

.plot {
  width: 100%;
  height: 200px;
}

#tooltip {
  background-color: #FEE;
  display: none;
  position: absolute;
  padding: 5px;
  border: 1px solid #FDD;
  opacity: 0.8;
}

JavaScript

var options = {
	grid: {
  	hoverable: true
  }
};

var data1 = [
	{
  	label: "Series 1",
    data: [[0,0],[1,2],[2,0],[3,3]]
  }
];
var data2 = [
	{
  	label: "Series 2",
    data: [[0,2],[1,2],[2,0],[3,1]]
  }
];

var tooltipEl = $("#tooltip");

$(document).on("plothover", ".plot", function(event, pos, item) {
	if (item) {
  	let x = item.datapoint[0];
    let y = item.datapoint[1];
    tooltipEl.html("x: " + x + "<br>y: " + y);
    tooltipEl.css({
    	left: item.pageX + 10,
      top: item.pageY + 10
    }).fadeIn(200);
  } else {
  	tooltipEl.hide();
  }
});

$(document).on("mouseleave", ".plot", function() {
  tooltipEl.hide();
});

$.plot("#plot-1", data1, options);
$.plot("#plot-2", data2, options);