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 are ways to set hoverable on the graph, not that I am sure what exactly that means I can do with it.

I would like to know if anyone could contribute some examples that they have come across, or code for that matter, which demonstrate examples of any of the following:

• Dynamic tooltips triggered by hover over events on Flot chart elements
• Tick tooltips (hovering over the xaxis shows detail)
• Any kind of hover over / dynamic event binding which has been used w Flot

The effect I am looking for is similar to this Open Flash Chart example

Solution 1

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

Solution 2

There is also a simple tooltip plugin for it, you can find it here

And I also add some feature to the plugin, you can find it on github. https://github.com/skeleton9/flot.tooltip

Solution 3

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

Solution 4

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

Solution 5

Check out this library for tooltip and flot integration

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

View more solutions

Comments

[geerlingguy]

The flot tooltip plugin is extremely easy to use, for simple cases, all you need to do is add tooltip: true to your .plot() settings.

[Rmatt]

Consider using the original plugin, not the fork ;-) github.com/krzysu/flot.tooltip

[Roberval Sena 山本]

Do you know how to customize tooltip to be fixed (I mean. always show..)? we do not have much documentation on the friend google..

[Roberval Sena 山本]

Do you know how to customize tooltip to be fixed (I mean. always show..)? we do not have much documentation on the friend google..

[Roberval Sena 山本]

Do you know how to customize tooltip to be fixed (I mean. always show..)? we do not have much documentation on the friend google..

[Roberval Sena 山本]

Do you know how to customize tooltip to be fixed (I mean. always show..)? we do not have much documentation on the friend google..

[Kyle Mathews]

No but that sounds like an excellent thing to ask as a new question :-)

[Travis J]

@RobervalSena山本 - Nope, I don't. I am not familiar enough with flot to point you towards anything either. That said, having the tooltip always show sounds more like a label. Either way, I have stopped using flot altogether and switched to highcharts.