Any examples of Flot with floating tooltips?

Question

I am currently working on a Flot graph, the API which seems pretty powerful overall, although examples of advanced use are not widely documented.

The API suggests there

Answer 1

The link in Simon's answer worked very well to provide a hook to use with the floating tooltips. However, I found that I had to dig around and cut code up in order to accomplish the hover affect. Here is the result (basically verbatim from http://people.iola.dk/olau/flot/examples/interacting.html).

The only setting that needs to change in the flot initialization is in the options object. It needs to include this as one of the options:

var options = {
 //... : {},
 grid: { hoverable: true }
};

This function constructs and shows the tooltip element when called. The parameters x and y are offsets inside of the flot so the tooltip positions properly. The contents are what are shown in the tooltip

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);
    }

This is the bind, it should only be called once when the element used as a placeholder for flot is available. It wires the event handler. previousPoint is used as a flag for displaying the tooltip

    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;
        }
    });

Answer 2

You can add custom data to the data array and use that to display tooltips.

See my answer and full example here: displaying custom tooltip when hovering over a point in flot

Answer 3

http://data.worldbank.org is built using Flot and uses tooltips.

Answer 4

http://craigsworks.com/projects/qtip2/demos/#flot is my favorite JS tooltip library. Its pretty badass and has flot integration.

Answer 5

Have a look at this flot example which demonstrates tooltips for plot points on the chart. (Make sure you select the Enable tooltip checkbox.)

Answer 6

Check out this library for tooltip and flot integration

https://github.com/krzysu/flot.tooltip