Ссылка в ответе Саймона работала очень хорошо, чтобы обеспечить ловушку для использования с плавающими подсказками. Тем не менее, я обнаружил, что мне нужно копаться и разрезать код, чтобы добиться эффекта парения. Вот результат (в основном дословно от http://people.iola.dk/olau/flot/examples/interacting.html).
Единственный параметр, который необходимо изменить при инициализации flot, - это объект параметров. Необходимо включить это как один из вариантов:
var options = {
//... : {},
grid: { hoverable: true }
};
Эта функция создает и показывает элемент всплывающей подсказки при вызове. Параметры x и y являются смещениями внутри flot, поэтому подсказка располагается правильно. Содержимое - это то, что показано во всплывающей подсказке
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);
}
Это привязка, она должна вызываться только один раз, когда доступен элемент, используемый в качестве заполнителя для flot. Он связывает обработчик событий. previousPoint используется в качестве флага для отображения всплывающей подсказки
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;
}
});