Question

I’m trying to follow this example to add a tooltip to a flot graph. But the tooltip does not show up.

$(document).ready(function(){
    $("#plotarea").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();
        }
    });
});

function showChartTooltip(x, y, contents) {
        $('<div id="charttooltip">' + contents + '</div>').css( {
              position: 'absolute',
              display: 'visible',
              'z-index': 100,
              top: y + 5,
              left: x + 5,
              border: '1px solid #bfbfbf',
              padding: '2px',
              'background-color': '#ffffff',
              opacity: 1                              
        }).appendTo($('#main_body')).fadeIn(200);
        } 
</script>

<div class="main_body"> //->is present in the html

I checked with firebug if the showChartTooltip method is called. This works. When I step through the code everything seems to work as expected, only I do not know who I can judge in firebug whether the appendTo call is successfull.

This was the first thing I wanted to check since the tooltip does not show up. I inserted also a very high z-index in order to be sure that this is not the problem.

If somebody has an idea what else could be wrong.. I would really appreciate your comments.

Answer 1

If the <s and so on are actually present in your code then that’s almost certainly your problem. You need to write actual html as the parameter:

$('<div id="charttooltip">' + contents + '</div>')