The link in Simon's answer worked very well to provide a hook to use with the floating tooltips. However, I found that I had to dig around and cut code up in order to accomplish the hover affect. Here is the result (basically verbatim from http://people.iola.dk/olau/flot/examples/interacting.html).
The only setting that needs to change in the flot initialization is in the options object. It needs to include this as one of the options:
var options = {
//... : {},
grid: { hoverable: true }
};
This function constructs and shows the tooltip element when called. The parameters x and y are offsets inside of the flot so the tooltip positions properly. The contents are what are shown in the tooltip
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'
}).appendTo("body").fadeIn(200);
}
This is the bind, it should only be called once when the element used as a placeholder for flot is available. It wires the event handler. previousPoint is used as a flag for displaying the tooltip
var previousPoint = null;
$("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(0),
y = item.datapoint[1].toFixed(0);
showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
tooltip: trueto your.plot()settings. – Abelabelard