jquery.flot.tooltip
Advanced tools
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.
Download and include on your page after main jquery.flot library:
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
}
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)%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.function(label, xval, yval, flotItem) that must return a string with the format described.%lx and %ly, that work with flot-axislabels plugin.%ct placeholder for any custom text withing label (see example in examples/custom-label-text.html)%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 datayDateFormat : you can use the same specifiers as in Flot, for time mode datamonthNames : check #28dayNames : check #28shifts : shift tooltip position regarding mouse pointer for x and y, negative values are okdefaultTheme : 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 CSSlines : whether or not to have a tooltip on hover for lines between pointsonHover : 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.6See CONTRIBUTING.md
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.setTooltipPosition(pos)showTooltip(item, pos)hideTooltip()%ct placeholder (see #75 or example in examples/custom-label-text.html)FlotTooltip object structure changed to allow many instances to fix issue #13 (regression after v0.5 refactoring)content can be a function (thx to @fmsf for pull request)dateFormat option replaced with xDateFormat and yDateFormat to support both axesmode == time then format value according to axis date format (if defined) or tick formatbody, not placeholder of graph#flotTip container is initialized only if it does not exist (see new multiple-axes example and re-initialize plot)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.
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>"
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 labelFrom now on also minified version is available.
content can be a functionCopyright (c) 2011-2016 Krzysztof Urbas (@krzysu) & Evan Steinkerchner (@Roundaround).
jquery.flot.tooltip is available under the MIT license.
FAQs
easy-to-use tooltips for Flot charts
The npm package jquery.flot.tooltip receives a total of 8,524 weekly downloads. As such, jquery.flot.tooltip popularity was classified as popular.
We found that jquery.flot.tooltip demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.