Any examples of Flot with floating tooltips?

问题:

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

回答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.)

回答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

回答3:

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

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

回答5:

Check out this library for tooltip and flot integration

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

回答6:

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

回答7:

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