jQuery Flot Graph: Show tooltip without hover/click on the points

Question

Currently I am working on Line type jQuery Flot graph. In which, on hovering over the data point it shows the tooltip. I have also bind the plotclick event handler due to which, on clicking the data point, gives more information about the point.

Now, I want to show specific data points to display the tooltip without hovering or clicking on these points.

An idea which came to me to accomplish this is:

I created one function called shownotetip(). As seen in code below:

      function shownotetip(x,y,contents, colour){
            $('<div id="value">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            'border-style': 'solid',
            'border-width': '2px',
            'border-color': colour,
            'border-radius': '5px',
            'background-color': '#ffffff',
            color: '#262626',
            padding: '2px'
            }).appendTo("body").fadeIn(200);
          }

This function takes four parameters which are

x -> x-Position, y -> y-position, contents and colour

Now when I call this function using dummy values such as :

 a = 360;
 b = 379;
 c = "<p>Hello</p>";
 shownotetip(a, b, c); //colour parameter is optional

then I get the tooltip box on the graph(which is desired). However, what I want is to display the tooltip at the certain points using the pageX and pageY value (through which plothover takes position value). Any help will be appreciated. Thanks

Answer 1

You can use the .p2c function combined with the .offset function to translate point position to screen coordinates.

For example, given a data array d1, this would put your tooltip on every other point:

var divPos = somePlot.offset();
for (var i = 0; i < d1.length; i+=2) {
    pos = somePlot.p2c({x: d1[i][0], y: d1[i][1]}); 
    shownotetip(pos.left+divPos.left, pos.top+divPos.top, i);
}

Here's a fiddle.