krzysu / flot.tooltip

tooltip plugin for wonderful Flot plotting library

IMPORTANT

This repository is no longer actively maintained! All pull request or issues will be ignored starting from 1st of August 2016. If you want to become a new owner and main contributor, please write me an email. You can find my email address on my personal website, linked in my github profile.

jquery.flot.tooltip

tooltip plugin for wonderful Flot plotting library

For information about Flot library go here.

Works also with Time series data and supports Date formatting in the same way as Flot itself. You can fully define content of tip (with values precision) and you can use HTML tags too. Flot Tooltip can be easily customized with CSS. Just do what you want with .flotTip in your stylesheet.

Check examples folder for details of how to use it.

How to use

Download and include on your page after main jquery.flot library:

• Latest Release
• Nightly Build

You can also use bower package manager:

bower install flot.tooltip

Important! You need to set flot option hoverable to true if you want flot.tooltip plugin to work.

grid: {
  hoverable: true
}

Plugin Options

In comments there are default values

tooltip: {
    show:           boolean                 //false
    cssClass:       string                  //"flotTip"
    content:        string or function      //"%s | X: %x | Y: %y"
    xDateFormat:    string                  //null
    yDateFormat:    string                  //null
    monthNames:     string                  // null
    dayNames:       string                  // null
    shifts: {
        x:          int                     //10
        y:          int                     //20
    }
    defaultTheme:   boolean                 //true
    lines:          boolean                 //false
    onHover:        function(flotItem, $tooltipEl)
    $compat:        boolean                 //false
}

• show : set to true to turn on this plugin (if grid.hoverable is also set to true)
• cssClass : the class to assign to the tooltip's HTML DIV element, defaulted to "flotTip"
• content : content of your tooltip, HTML tags are also allowed; use %s for series label, %x for X value, %y for Y value and %p for percentage value (useful with pie charts using flot.pie plugin)
  With %x, %y and %p values you can also use .precision, for example %x.2 means that value of X will be rounded to 2 digits after the decimal point.
  If no precision or dateFormat is set then plugin uses tickFormatter to format values displayed on tooltip.
  If you require even more control over how the tooltip is generated you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
  The content callback function pass may also return a boolean value of false (or empty string) if the tooltip is to be hidden for the given data point. Pull request #64 introduced two more placeholders %lx and %ly, that work with flot-axislabels plugin.
  Pull request #75 introduced %ct placeholder for any custom text withing label (see example in examples/custom-label-text.html)
  Pull request #112 introduced %n placeholder for the total number (rather than percent) represented by a single slice of a pie chart.
• xDateFormat : you can use the same specifiers as in Flot, for time mode data
• yDateFormat : you can use the same specifiers as in Flot, for time mode data
• monthNames : check #28
• dayNames : check #28
• shifts : shift tooltip position regarding mouse pointer for x and y, negative values are ok
• defaultTheme : plugin have default theme build-in but here you can switch it off and adjust look of tip styling .flotTip (or whatever you set the class parameter to) in your CSS
• lines : whether or not to have a tooltip on hover for lines between points
• onHover : callback that allows you i.e. change color of the border of the tooltip according to the currently hovered series
• $compat : whether or not to use compatibility mode - set this to true if you are using jQuery <1.2.6

Supported plugins

• stack
• pie
• threshold
• axislabels
• tickRotor
• stackpercent
• [time] (http://www.flotcharts.org/flot/examples/axes-time/index.html)
• [curvedLines] (http://curvedlines.michaelzinsmaier.de/)

For developers/contributors

See CONTRIBUTING.md

Changelog

v0.9.0

• merged pull requests: #140, #142

v0.8.7

• merged pull request: #138,

v0.8.6

• pull requests from the community since May 2015

v0.8.5

• IMPORTANT NOTE A: while a legacy check exists, the options object format has changed to be a single object tooltip with a property show (defaulted to false). The legacy check may not always exist, so it may be a good idea to update your production code.
• IMPORTANT NOTE B: while there's a legacy check for the options object, there is not one for the id-to-class change (see below). This change will be far less relevant to developers, as it only matters when adding custom CSS styling. If your implementation does so, make sure you change your selectors with the new version!
• merged pull requests: #95, #98, #99, #103
• corrected some errors in the documentation
• improved line tracking feature - now utilizes flot's plot object's grid.mouseActiveRadius option for threshold and is based off pixel distance instead of data.
• changed the id option to cssClass instead. This means the option is now cssClass instead of id, and will (obviously) be assigned as a class instead of an id. Therefore, any relevant CSS selectors need to be changed as well.
• added fix that should allow x axis value to work properly in some multiple-series implementations

v0.8.4

• merged pull request #87, adding compatibility with jQuery < 1.2.6
• added new API functions to Flot's base plot object:
  • setTooltipPosition(pos)
  • showTooltip(item, pos)
  • hideTooltip()
• cleaned a lot of the source code for better maintainability and development

v0.8.3

• merged pull requests: #86, #85, #83
• pull request #86 introduced support for showing tooltips when hovering over the lines between points
• dropped the IE polyfill indexOf in favor of jQuery's $.inArray
• these changes were actually distributed across v0.8.0-v0.8.3, but they all happened one after another so the changes have been summarized together

v0.7.1

• merged pull requests: #78, #74, #75
• added support for any arbitrary text in a label with a new %ct placeholder (see #75 or example in examples/custom-label-text.html)

v0.7.0

• added time zone support by using $.plot.dateGenerator by @ilvalle
• this version requires that jquery.flot.js is updated to the v8.3

v0.6.7

• added support for tickRotor plugin, thanks to @pauljandrew
• added support for flot-axislabels plugin (https://github.com/markrcote/flot-axislabels) through two new placeholders "%lx" and "%ly" for respectively x and y axis labels, thanks to @LoicUV
• added a plugin "detection" system for facilitating further plugin-dependent developments
• some bug fixes, thanks to @vitorbaptista

v0.6.6

• added support for custom tick label on y axis, thanks to @LoicUV

v0.6.5

• added support for threshold.plugin with new example, fixed #57, thanks to @juerkkil

v0.6.4

• great job by @Lukindo, fixed a few issues:
  • precision in x or y value #50
  • concerning $ escaping #16
  • use custom ticks if given #18
  • remove %s if series label is undefined #41

v0.6.3

• enable Flot original ability to change both dayNames and monthNames, fix #28, thanks to @Jako

v0.6.2

• events are properly unbinded on shutdown, thanks to @maplemuse
• hide empty tooltip div on init, thanks to @ulipollo

v0.6 and v0.6.1

• nothing from user perspective :)
• another refactoring, FlotTooltip object structure changed to allow many instances to fix issue #13 (regression after v0.5 refactoring)

v0.5.1

• content can be a function (thx to @fmsf for pull request)

v0.5

• refactoring + fixed few issues (#7 and #11)
• dateFormat option replaced with xDateFormat and yDateFormat to support both axes
• changed string formatter logic:
  • if any axis has mode == time then format value according to axis date format (if defined) or tick format
  • if value has set precision, use it
  • in the end use tick formatter for the axis

v0.4.4

• add jquery.flot.pie plugin support, you can display percentage value on tooltip (thx to @ismyrnow for pull request)

v0.4.3

• add jquery.flot.stack plugin support, values in tooltip are now displayed correctly (issue #3)

v0.4.2

• tooltip is appended to body, not placeholder of graph
• changed default values of tip's shifts
• time is formatted when first axis of flot's multi-axes is in time mode (issue #2) (full multi-axes support maybe in the future)
• #flotTip container is initialized only if it does not exist (see new multiple-axes example and re-initialize plot)

v0.4.1

• default theme with new option to disable it if you like to add your own styles

v0.4

Now you can easily set precision of values displayed on tip thanks to enhanced string formatter. Just put your desired precision after value in format like this %x.precision, where precision is a number of digits to appear after the decimal point. It uses number.toFixed(precision) function internally.

What is more string formatter was rewritten and now is RegExp based.

Examples:

content: "value of X is %x.1 and value of Y is %y.4 and they belong to '%s' series"
content: "<h4>%s</h4><ul><li>X is %x</li><li>Y is %y.2</li></ul>"

v0.3

I'd like to introduce string formatter. Now you can easily define how content of your flot.tooltip should look like. You can also use HTML tags!

Just use new option called content. The following specifiers are supported:

• %x: for X value
• %y: for Y value
• %s: for series label

From now on also minified version is available.

v0.2

• many series support with series name on the tooltip
• date and time formatting can be defined when in time mode (using internal plot function)
• tooltip position shift can be defined

Contributors

• @Roundaround - core project contributor
• @ismyrnow - add jquery.flot.pie plugin support
• @fmsf - content can be a function
• @pdelanauze - upgrade to gruntjs v0.4 + memory usage optimization
• @grrowl - fix tooltip position for touch devices
• @Athanasius - fix issue #17, Tooltip is outside the window
• @erezmazor - added label to the signature of content function to allow for fully custom label drawing
• @maplemuse - pull request #39
• @ulipollo - pull request #42
• @Augi - pull request #36
• @eunomie - pull request #52
• @Jako - pull request #55, fix for issue #28
• @Lukindo - pull request #56, fix for issues: #50, #16, #18 and #41
• @LoicUV - pull request #62, added support for custom tick label on y axis, pull request #64, support for flot-axislabels plugin
• @vitorbaptista - pull request #66, fix tooltip when displaying multiple series
• @pauljandrew - pull request #67, add support for tickRotor plugin
• @pib - bower package manager configuration file
• @ilvalle - pull request #77, added time zone support by using $.plot.dateGenerator
• @willianganzert - pull request #83, Add "id" to tooltip element
• @larsenmtl - pull request #85, Support for stacked percent plugin
• @RoboterHund - pull request #87, Compatibility fix for older versions of jQuery
• and many more, check merged pull requests

---

Copyright (c) 2011-2016 Krzysztof Urbas (@krzysu).

jquery.flot.tooltip is available under the MIT license.

flot.tooltip's Issues

%p is not working in latest version.

My code is here-
http://jsfiddle.net/Y4wP4/1/
Stackoverflow - http://stackoverflow.com/questions/22665992/p-for-percent-in-stacked-graph-with-jquery-flot-tooltip-is-not-working

Thanks

Having a few issues

(1) On a pie chart, I cannot get the %p to work. It simply shows as "%p". %s works just fine. On my label, I can get a percentage with series.percent.

(2) Also on a pie chart, I have a label set up, like this:

label: {
show: true,
radius: 5/8, // where in the pie chart to put the labels; 5/8 from center
threshold: 0.05, // 5% threshold to show the label
formatter: function(label, series)
{
return '

'+label+'
'+Math.round(series.data[0][1]) + '

';
},...

The tooltip does not work over the label, just the rest of the pie chart.

(3) On a bar chart, the series %s does not show anything, only %x and %y. (%p does not work either.)

tooltip leaks memory when repotting with $.plot

The flot.tooltip library does not unbind listeners, so it leaks memory when repotting with $.plot.

I've profiled this in my fork, and will attach a pull request.

Doesn't work with "threshold" plugin

If you add the tooltip plugin to a graph which also uses the threshold plugin, the tooltips don't show, and there are javascript errors in console.

Uncaught TypeError: Cannot read property '0' of undefined 

I've assembled an example here:
danielgwood/flot.tooltip@bbf45ccaea6210c33c015e4f8bb1e234c8e8a372

Doesn't handle stacked bar charts

The tooltips either don't show on some of the stacked bars or display NaN. Loving this plugin otherwise :)

Tooltip doesn't honor dayNames and monthNames

Flot has the ability to change both dayNames and monthNames.
However it seems to me that the plugin uses the default ones.

Line tracking does not support stepped lines.

The line tracking plugin does not support the stepped lines option - only the default straight style. It would be nice to add support for this in the future.

Dateformat for yaxis

I have a graph in which on the xaxis I have the daily time, while on the yaxis I have the elapsed time, both of them have mode='time'
The tooltip shows correctly the time formated as dateFormat but it shows the milliseconds for the yaxis.
The best would be to have the possibility to spit dateFormat into two different parameters, so I can have two different dateFormat, one for the x, the other for the y.

Tooltips go past edges of browser window

When displaying a tooltip close to the edge of the browser window it will show outside of the browser window, it may make more sense to calculate the width of the tooltip and ensure that it does not go outside of the browser width.

Tooltips incorrectly assigned when using steps option in flot

When using the steps option in flot, as below, tooltips are not assigned to the correct datapoints.

lines: {
        show: true,
        steps: true
    }

This is probably due to the fact that flot adds additional datapoints to the graph when steps is set to true. Ideally, flot.tooltip should ignore them, and only show tooltips on the "real" datapoints.

Use custom tick label for Y axis

As it is for x axis, it may be useful to use custom tick labels for y axis if they are given. Here's my code, feel free to improve it :

// change y from number to given label, if given
if(typeof item.series.yaxis.ticks !== 'undefined') {
    for (var index in item.series.yaxis.ticks) {
        if (item.series.yaxis.ticks.hasOwnProperty(index)) {
            if (item.series.yaxis.ticks[index].v === y) {
                content = content.replace(yPattern, item.series.yaxis.ticks[index].label);
            }
        }
    }
}

Multiple charts don't allow different tooltip content

First, thanks for the great plugin. It really helps to make my code a little cleaner.

I' like to display multiple charts on one page, and I'd like each of them to display their tooltip content in a different manner. I'm finding that that the last chart to be defined with tooltipOpts.content will override any previously defined format options.

Below is an example where I'd like the first chart to display just the Y data, and the second chart to display X and Y. But, they both display the same X and Y format.

http://jsfiddle.net/awhalen/wsaAn/

xPattern and yPattern does't have any matched group

    var xPattern = /%x\.{0,1}(?:\d{0,})/;
    var yPattern = /%y\.{0,1}(?:\d{0,})/;

They don't have match group. But adjustValPrecison() require a group:
if(RegExp.$1 !== '') {
precision = RegExp.$1;
value = value.toFixed(precision)
}

It would looks like:
var xPattern = /%x.{0,1}(\d{0,})/;
var yPattern = /%y.{0,1}(\d{0,})/;

trigger tooltip from outside the canvas

Hi!
First "thanks" for that plugin - it really helps. I'm using angular JS and quite heavy flot charting. I'm wondering whether or how I can externally trigger a flot tooltip to be rendered. My setup is like:

• a complex chart (up to 3 shifted and side by side stacked bars each xaxis tick)) where hovering is actually impossible referring to a touch device for example.
• toolttips should be rendered on changing a slider at the bottom of the flot canvas
• for now only one set of series data item should be displayed in one tooltip means ... the user chooses the series (in my case e.g. 1 out of 3) for which the tooltip should be displayed and on changing the slider the tooltip for that specific series should pop up.

Actually I have everthing in my hands:

• I know the slidervalue which is mapped to the xaxis tick
• I know the series datapoints to show the tooltips for

Do you have any suggestions ? Am I missing something ?

tooltip displays without leading $1

It seems that if I have a tickFormatter defined like so:

tickFormatter: function(val, axis) {
  return '$' + val.toLocaleString();
},

And the number (val) that's passed in begins with a 1 (e.g. 17527 or 123), then the leading $1 in the formatted tick is removed, resulting in something like 7,527 or 23 instead of $17,527 or $123...

I was scratching my head over this, as the ticks display correctly on the left side of the flot graph, but they display incorrectly in the hovered tooltip. For tooltipOpts, I have content: "%y".

$tip display inline-block should be none

On line 122 'display': 'inline-block' should be 'display': 'none' otherwise a small circle will appear at the bottom of the page by default. I can see that you hide it, but by setting this in the CSS you are overwriting the hiding of the tooltip.

support for percentage

Would you add simple code to support percentage?

For pie chart using flot pie plugin, it is quite easy, only add 2 lines of code in stringFormat to do this:

var pPattern = /%p\.{0,1}(\d{0,})/;
content = adjustValPrecision(pPattern, content, item.series.percent);

It will be also useful if you can add percentage support for stacked bars, which need to calculate the percentage value.

Piechart tooltip content: '%p%, Series1'

I've just cloned the repository and am running the examples.

For examples/pie.html, when I hover over a segment, the tooltip content is %p%, Series1.

If I comment out tooltipOpts.content in pie.html, the tooltip content is Series1 | X: %x | Y:%y.

I'm looking into this now, but wondering if you can see anything obvious?

Allow formatter for tooltip values

I love this plugin's simplicity. The only thing I'm wondering is if it would be possible to either (a) reuse flot's axis-based tickFormatters, or (b) define formatters for the %x, %y, and %p values that are replaced in content strings.

It's definitely not the end of the world not having this feature, but it's nice when you have data sets in the millions and billions. Instead of 42924829, you'd have 42,924,829.

doesnt work with curvedlines plugin

hi, i'm using this plugin with other plugin (curvedLines) but i cannot display tooltip when i hover no display in the console here is my experiment http://jsfiddle.net/BkruN/3/

Tooltip on Pie Chart Label

on a pie chart, I have a label set up, like this:

label: {
show: true,
radius: 5/8,
threshold: 0.05,
formatter: function(label, series)
{
return ''+label+''+Math.round(series.data[0][1]) + '';
},...

The tooltip does not work over the label, just the rest of the pie chart.

Not getting %y value replaced on line graph

I have a simple line graph to which I've added tooltip: true, and the X value updates correctly, but the y value shows by default as %y.2, and even if I add in tooltipOpts and include a custom string with %y in it, the %y is not replaced with my y axis data.

A couple notes: For the y axis in the plot, I have a custom minimum value set (instead of 0), and I am using a tickFormatter to put commas into the numbers.

Won't render in Safari or IE9

I can't get the tooltips to render in Safari or IE9. Chrome and FF work fine. Any thoughts?

Option to use tickformatters in label

I'd like an option to use tickformatters of the x and y values.
Something like this:

xVal = 0;                                                    
yVal = 0;                                                    

if(opts.xaxis.mode === "time") {                             
    xVal = timestampToDate(item.datapoint[0]);               
    yVal = item.datapoint[1];                                
}                                                            
else {                                                       
    xVal = opts.xaxis.tickFormatter(item.datapoint[0]);      
    yVal = opts.yaxis.tickFormatter(item.datapoint[1], 0);   
}                                                            
tipText += to.xValText + xVal + " " + to.yValText + yVal;    

$(window).innerWidth() not working in some deployments

I could only get the plugin to work after manually changing the updateTooltipPosition method from $(window).innerWidth() to $(window).width().
I also changed $(window).innerHeight() to $(window).height().
The current version causes jQuery to throw one TypeError exception per hover event.
I read this:
api.jquery.com/innerwidth/
and applied the changes accordingly.

I'd like to suggest a tooltipOptions param to select between the two and/or a docs update.
Thanks

Does not work with threshold plugin

Just noticed that the plugin does not work with threshold plugin. Since threshold plugin splits the data series to multiple series, item.series is not what the plugin supposes that it should be.

Latest commit (8a9ed0e) seems to have broken this, it works when you refer directly to item.datapoint as previous versions.

support of flot.stackpercent not available

Hi,

support of flot.stackpercent from skeleton9 is not assume. may be you could add this line in the source to assum it.

//support for stacked percentage
if(typeof (item.series.percents) !== 'undefined')
{
content = this.adjustValPrecision(percentPattern, content, item.series.percents[item.dataIndex]);
}

regards

Location of tooltip

I tried tooltip for a flot in a modal window of bootstrap 2.x. The tooltip was hidden by the modal window.

Could the tooltip div be appended to the flot's parent, or use a container object like flot's legend container?

Point not always recognized as part of a "time" mode series

There's a check for opts.xaxis.mode, but there should be another check for opts.xaxes[0].mode like this:

if(opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {
    tipText = stringFormat(to.content, item, timestampToDate);
}

Problems when displaying tooltips of multiple series

Hi,

This is the problem I'm facing:

Note that, even though there're two bars: Foo and Bar, the tooltip calls them Foo in both cases.

I reproduced this in a fiddle at http://jsfiddle.net/vitorbaptista/vPGH6/1/. It basically creates two series:

var values1 = [ ["Foo", 5] ];
var values2 = [ ["Bar", 10] ];

var options = {
  // Set up bars, set mode as category, etc. Nothing special.
};

var plotObj = $.plot( $("#bars"),
  [
      { data: values1, label: "Series 1"},
      { data: values2, label: "Series 2"}      
  ],
  options );

The problem comes from FlotTooltip.stringFormat, specially from https://github.com/krzysu/flot.tooltip/blob/master/js/jquery.flot.tooltip.js#L225-L229

// change x from number to given label, if given
if(typeof item.series.xaxis.ticks !== 'undefined') {
  if(item.series.xaxis.ticks.length > item.dataIndex && !this.isTimeMode('xaxis', item))
    content = content.replace(xPattern, item.series.xaxis.ticks[item.dataIndex].label);
}

What this does, AFAIK, is get the tick indexed at item.dataIndex's label and replace it at %x. The problem is that, in this case, item.dataIndex is always 0, because both values have a single data array. As the label at the tick indexed at 0 is Foo, this is what we get.

I couldn't understand why this code exists. At that point, the correct label is already in the x and y variables, configured in https://github.com/krzysu/flot.tooltip/blob/master/js/jquery.flot.tooltip.js#L175-L182.

Is this the expected behavior? Am I doing something wrong?

Thanks!

Support for tooltipOpts in series data

I would like to customize the tooltip content on a per-series basis:

var dataOpts = [{
  data: [...],
  label: 'Foo'
},{
  data: [...],
  tooltipOpts: {
    content: 'Bar: %y'
  }
}];
var plotOpts = {
  ...
  legend: {
    show: true
  },
  grid: { hoverable: true },
  tooltip: true,
  tooltipOpts: {
    content: '%y'
  }
}

$.plot($('#plot'), dataOpts, plotOpts);

Basically, I have some series that I want included in the legend, while I have other series that I want to specially format the tooltip content, without the series appearing in the legend.

In the plothover eventhandler, the item has the series data, so it should be possible to change

tipText = that.stringFormat(that.tooltipOptions.content, item);

to some variation of

if (item.series.tooltipOpts !== undefined && item.series.tooltipOpts.content !== undefined){
    tipText = that.stringFormat(item.series.tooltipOpts.content, item);
} else {
    tipText = that.stringFormat(that.tooltipOptions.content, item);
}

%y stays in tooltip when correspondig yaxis has "show: false"

When a yaxis is not shown by setting "show: false", the tooltip does not replace %y with the value. As soon as the yaxis is shown, it also replaces %y.

Similar case with two yaxes: When e.g. one yaxis is shown and one is not shown, the series belonging to the shown yaxis has correct tooltips while the other has "%y".

Latest Version (0.6.7) failed to work on IE 8

Received JavaScript error when using latest 0.6.7 version.
No error if older version (0.6.6) is used.

y2axis support

Hi,
on my plot I am using both yaxis and y2axis, one for timing, one for raw numbers. The former is defined mode: time, the latter mode: null. However the plugin shows time for both of them.
Live example https://traffic.integreen-life.bz.it/vtraffic/default/origin_destination, the line called matches uses y2axis.

Tooltips are off when using stepped lines

I have found that the x-axis values are off when using stepped lines. As flot adds extra points for stepped lines, tooltips isn't accounting for the additional points.

I can offer this diff of the two_chars.html file that demonstrates the issue.

16c16
<         lines: { show: true },

---
>         lines: { show: true, steps: true },
21a22
>       tooltipOpts:{"defaultTheme":false ,"content":"%s: %y -%x","dateFormat":"%m/%0d/%0y %h:%M"},
23,25d23
<       tooltipOpts: {
<         content: "y: %y"
<       }

xDateFormat not working

I have just updated to your final version and nothing seems to work properly.
First of all the xDateFormat option throws an error undefined is not a function when hovering over a tick.

Second, I've used a custom function for content which simply returns %x
Visits: %y so I get 0:00 Visits: 12345

Add on click support.

On mobile devices, hover doesn't work as expected. It would be great to show the tooltip on click, and let the tooltip stay there.

%s stays in tooltip if there is no series label

I think it would be better if it were removed. So there is no need to change content option in tooltipOptions. If there is series label %s is replaced and if not only x,y coordinate is show.
It's just two lines

else{
            //remove seriesPattern if label is not defined
            content = content.replace(seriesPattern, "");
        }

onHover function doesn't work as expected

The following is very odd and I have been trying to debug but unfortunately don't have the time to continue devoting to figuring this out. I'm hoping that maybe you have more knowledge as to why the function is being wiped out for onHover if it is a reference to a function verses an anonymous one.

Here is what doesn't work but I would like to do (much like I do for content):

onHover: setupTooltip()

setupTooltip(flotItem, $tooltipEl) {
     ...
}

For some reason that get's set to "" in the options.

Doing the following works as expected:

onHover: function(flotItem, $tooltipEl) {
     setupTooltip(flotItem, $tooltipEl);
}

Any help would be great.

Greg

tooltipOpts.content %x & %y - seems to pass in tick formatted value, not original data value

If I understand correctly it seems that the original data value is not accessible to the plugin - tooltip takes the y value in the same format as the tick value.

I think this will be a problem in common usage. For example, I have currency data like:
123456.1234

On my axis I want to see:
100,000

In my tooltip I want to see:
$123,456.12

What I actually see in the tooltip is:
123,456

So it seems tooltip takes the value after it has been changed by the flot tickFormatter. This means I cannot regain the lost precision, and would have to 'undo' the other formatting.

Tooltip doesn't appear over piechart labels

When you mouseover a piechart the tooltip appears fine, but if you mouseover label text (over the piechart) the tooltip disappears - presumably because the event isn't propagating to the parent? A javascript fix for this would be good, but a quick CSS workaround is:

.pieLabel {
  pointer-events: none;
  }

but that doesn't work in IE until v11.

Tooltip is outside the window

If you hover in the edge of the window the tooltip gets placed outside.
It it possible to integrated something like qtip?
https://github.com/Craga89/qTip2/blob/master/src/viewport/viewport.js

Avoid an empty tooltip showing up at the end of the html

Avoid an empty tooltip showing up at the end of the body right after loading.

Need class to allow for adjusted styling when tooltip offset from left or top instead of default

When doing the styling for the tips, I've added a little arrow and adjust the tooltip offset, but this breaks when the tip offset is adjusted if the tooltip is too close to the edge, so I basically I need a class to be added to indicate the type of offset being implemented.

I have already created a fix, will submit a pull request shortly.

tooltip shows incorrect y value for stacked bar charts

I used flot.stack to create a stacked bar chart. It stacks the bars by changing the data points. The flot.tooltip plugin displayed the modified data point's y value (which is the sum of the heights of the stacked bars) when formatting "%y". Instead, it should show the original data point's y value (the height of a single bar within the stack).

Looks like flot.tooltip is getting the x and y values from item.datapoint, which is the modified data point. The original data point is available in item.series.data[item.dataIndex].

time zone support

Hi, if I define xDateFormat or yDateFormat the time values shown are wrong, namely they are 1h in advance in my case, I live in Italy which is UTC+1. However if I don't define the two variables the value shown are correct.

Problem with precision in the x or y value

I'm working with this plugin and, first of all, I have to tell you that It's great!

The code was working fine for the pie precision. But when I tried in the x or y in a bar chart I came across this issue. The precision was not working. I looked at the source code for the plugin and I find out what was the issue.

I just put the following lines in the code, overwriting the existing ones, and it worked. So I'm here to share this with you. The lines are:

164 var xPattern = /%x.{0,1}(\d{0,})/;
165 var yPattern = /%y.{0,1}(\d{0,})/;

instead of

164 var xPattern = /%x.{0,1}(?:\d{0,})/;
165 var yPattern = /%y.{0,1}(?:\d{0,})/;

Tooltip does not replace x label by given x.

If you have given your xaxis your own label with ticks, the tooltip does not show those ticks.

E.G.

data: [ [0, 450], [1, 550], [2, 320], [3, 700] ],
xaxis: {
     ticks: [
       [0, "great"],
       [1, "greater"],
       [2, "greatest"]
     ]
}   

Could you fix this in your next version?

---

N.B. For those whom need a quick fix, go to your jquery.flot.tooltip to line 181.

There you should see:

if(typeof item.series.xaxis.tickFormatter !== 'undefined') {

Change that line to:

 if(typeof item.series.xaxis.tickFormatter !== 'undefined' && item.series.xaxis.ticks.length == 0) {

And add above these line:

// change x from number to given label, if given
if(item.series.xaxis.ticks.length != 0) {
   content = content.replace(xPattern, item.series.xaxis.ticks[item.dataIndex].label);
}

Done :D.

Library is outdated. IT's not working with latest Flot

First thing - u use
return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);

$.plot.formatDate - is not a part of flot any more.

Default z-index is under Bootstrap's modal.

The default theme's z-index of '100' is less than the z-index of Bootstrap's modal dialog, causing the tooltip to be hidden when the default theme is used for plots shown in a modal.

The minimum z-index I used to make the tooltip visible was '1040' (which is the z-index of Bootstrap's .modal class).

This issue is easily rectifiable by altering the z-index on either the tooltip or the modal, but, with the popularity of Bootstrap, it might be a good idea to have tooltips in modals "just work".