jquery - Tooltips in a flot-chart -

jquery - Tooltips in a flot-chart -

can please explain code me :

$("#linechart").bind("plothover", function (event, pos, item) { if (item) { var x = item.datapoint[0].tofixed(2), y = item.datapoint[1].tofixed(2); $("#tooltip").html(x + ', ' + y) .css({top: item.pagey, left: item.pagex}) .fadein(200); } else { $("#tooltip").hide(); }

so able create tooltips flot-chart re-create pasting code , modifying accompanying css #tooltip element. cant seem understand part of code var item, pos , top : item.pagey does?

here's heavily commented version of callback:

// binding plot hover event graph placeholder div // event fire anytime mouse moved within div // , callback function called $("#linechart").bind("plothover", function (event, pos, item) { // if mouse on point // callback function item (the point) // if mouse not on point null if (item) { // x, y graph coordinates in x/y axis units var x = item.datapoint[0].tofixed(2), y = item.datapoint[1].tofixed(2); // pagey, pagex screen coordinates in pixels // set tooltip div's html // set position of div on screen // show $("#tooltip").html(x + ', ' + y) .css({top: item.pagey, left: item.pagex}) .fadein(200); } else { // if aren't on point // item null, hide tooltip $("#tooltip").hide(); } }

jquery charts tooltip flot