How to Add a Tooltip to a Flot jQuery Graph CodeUnit 30 DEC 2009

Flot is a fantastic jQuery-driven graphing engine that is extremely flexible and capable of producing some wonderfully looking and interactive graphs.

Today’s quick tutorial looks at how one can add a tooltip to a flot-produced graph.

The secret here is to bind our tooltip generating function to Flot’s built in mouse hover event, firstly removing any tooltip that may already be in existence, generating the new tooltip and attaching it on top of the graph canvas at the correct point.

First we start off by defining our tooltip generating javascript function:

function showChartTooltip(x, y, contents) {
$('
;' + contents + '
;').css( { position: 'absolute', display: 'none', top: y + 5, left: x + 5, border: '1px solid #bfbfbf', padding: '2px', 'background-color': '#ffffff', opacity: 1 }).appendTo("body").fadeIn(200); }

You’ll notice that all we are doing is creating a div, styling it, setting it’s correct x and y co-ordinates in order to correspond to the graph hover position supplied, and then appending it to the main DOM via a jQuery call to append it to the “body” element. As an afterthought and just to make it look nice, we’re using jQuery’s nice little fadeIn functionality to bring the tooltip into view.

Now for the actual meat of the process. What we are going to do is specific the code that needs to be triggered on mouseover (which will call the tooltip drawing function specified above) and bind it to the built in flot plothover event.

$("#graphdivid").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
$("#charttooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY,'tooltip text to display');
} else {
$("#charttooltip").remove();
}
});
});

Binding the plothover event to the graph with id graphdivid, we firstly calculate the current X and Y co-ordinates from the event, check that the result is valid, remove any existing tooltip and then call the tooltip drawing function.

And that’s it. Really simple code in order to achieve quite a useful result!

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don’t have time for myself any more.

  • Tom

    Hei, nice snippet. Thanks for that. Note that the snippet only worked for me when I changed the next line:

    $(‘<div id=”charttooltip”>’ + contents + ‘</div>’)

    to:

    $(” + contents + ”)

  • Tom

    Hei, nice snippet. Thanks for that. Note that the snippet only worked for me when I changed the next line:

    $(‘<div id=”charttooltip”>’ + contents + ‘</div>’)

    to:

    $(” + contents + ”)

  • Tom

    uuh… comment was truncated by the blog.. just wanted to say that it does not worked for me to use lt and gt.. instead I wrote the correct html div tags in the showChartTooltip method.

  • Tom

    uuh… comment was truncated by the blog.. just wanted to say that it does not worked for me to use lt and gt.. instead I wrote the correct html div tags in the showChartTooltip method.

  • Aargh, thanks for picking up on that Tom. Stupid editor went and changed the tags on me and I didn’t notice!

  • Aargh, thanks for picking up on that Tom. Stupid editor went and changed the tags on me and I didn’t notice!

  • There, all fixed now…

  • There, all fixed now…

  • Kent

    In the example above what is “item” and where is it populated. I’m doing some trouble shooting and it doesn’t seem to be what I thought it was.

  • Kent

    In the example above what is “item” and where is it populated. I’m doing some trouble shooting and it doesn’t seem to be what I thought it was.

  • Kent

    Never mind. Guess I could have looked at the API before posting!

  • Kent

    Never mind. Guess I could have looked at the API before posting!

  • Great! Glad you could find the answer you were looking for Kent!

  • Great! Glad you could find the answer you were looking for Kent!

  • Sloth

    How would I display the 'x' value in my chart tooltip? Bare in mind I have my x axis in time mode, and I want to show a date in the tooltip, not the unix timestamp version.

    • var x = item.datapoint[0],
      var d = new Date(x);
      var month = d.getMonth()+1;
      d.getDate()
      d.getFullYear()

  • Sorry man, I haven't twiddled with flot for a while now after heading back to google graphs, so don't have the answer for you :(

  • Daniel Elkins

    I appreciate the awesome info about the tooltip, but i am having trouble with the actual content of the tooltip.. i get the rollover and see the highlight. I build my data set dynamically from a database, an example of my data is as follows:

    data: [[1285689600000,6]]

    I was looking at the code and saw references to “item.datapoint[]” in the tooltip. I figured that the array referred to information in the data array, as when i use [0] it displays “1285689600000”, and [1] displays “6”, soo .. i added one more element:

    data: [[1285689600000,6,’tooltip data’]]

    but referencing it by [2] doesn’t seem to display the information. any ideas?

    • RobQ

      Hey did find a way to do this?

      I’ve got data like [[time1,value1],[time2,value2]] but I want to add a location information to the data so the data will look like [[time1,value1,locationA],[time2,value2,locationB]] and still be graphed based just on time and value but then I want to show the location data (and more) in a tooltip.

      Any ideas?

  • Knvlngupta

    why it doesn’t work for the bars same like the lines graph shown above..? i just removed the points{show:true and replaced the lines with bars