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

Simon Lieschke · Accepted Answer · 2014-10-02T00:42:42.427

48

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

edited Oct 02 '14 at 00:42

answered Jan 19 '09 at 06:19

Simon Lieschke

13,058
6
46
60

Green Su · Answer 2 · 2012-05-07T03:08:38.330

11

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

edited May 07 '12 at 03:08

answered Apr 09 '12 at 07:28

Green Su

2,318
2
22
16

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. – geerlingguy Sep 10 '12 at 23:29
Consider using the original plugin, not the fork ;-) https://github.com/krzysu/flot.tooltip – Rmatt Jan 10 '14 at 11:27
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 山本 Jul 08 '16 at 08:03

score 9 · Answer 3 · answered Jun 24 '10 at 16:20

9

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

answered Jun 24 '10 at 16:20

Kyle Mathews

3,240
24
22

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 山本 Jul 08 '16 at 08:04

score 5 · Answer 4 · answered Jan 02 '14 at 17:51

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

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 山本, Jul 08 '16 at 08:02
@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. — Travis J, Jul 08 '16 at 18:19

score 3 · Answer 5 · answered Oct 26 '12 at 06:26

3

Check out this library for tooltip and flot integration

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

answered Oct 26 '12 at 06:26

nitin

109
4

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 山本 Jul 08 '16 at 08:04
No but that sounds like an excellent thing to ask as a new question :-) – Kyle Mathews Jul 08 '16 at 16:00

score 1 · Answer 6 · edited May 23 '17 at 12:02

1

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

edited May 23 '17 at 12:02

Community

1
1

answered Oct 01 '12 at 10:52

Lasse Skindstad Ebert

3,370
2
29
28

score 1 · Answer 7 · answered May 11 '11 at 21:21

1

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

answered May 11 '11 at 21:21

rynop

50,086
26
101
112

Any examples of Flot with floating tooltips?

7 Answers7

Linked