Options for the tooltip that appears when the user hovers over a series or point.

Method Used

Parameters:
  • mixed $name: the option name for the loading. Can be a string or array. When used as array a key value pair should be defined, where the key is the name
  • mixed $mixvalue: a value option in case the name is a string

API Tags:
Return: instance
Access: public


Example:

... $chart = new jqChart(); $chart->setChartOptions(array("defaultSeriesType"=>"line","marginRight"=>130,"marginBottom"=>25)) ->setTooltip(array("formatter"=>"function(){return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +' (°C)';}" )) ...


Option name Type Default
backgroundColor Color "rgba(255, 255, 255, .85)"
The background color or gradient for the tooltip.
borderColor Color "auto"
The color of the tooltip border. When null, the border takes the color of the corresponding series or point.
borderRadius Number 5
The radius of the rounded border corners.
borderWidth number 2
The pixel width of the tooltip border.
crosshairs Mixed null
Display crosshairs to connect the points with their corresponding axis values. The crosshairs can be defined as a boolean, an array of booleans or an object.
Boolean
If the crosshairs option is true, a single crosshair relating to the x axis will be shown.
Array of booleans
In an array of booleans, the first value turns on the x axis crosshair and the second value to the y axis crosshair. Use [true, true] to show complete crosshairs.
Array of objects
In an array of objects, the first value applies to the x axis crosshair and the second value to the y axis crosshair. For each dimension, a width, color and dashStyle can be given. can be given.
enabled Boolean true
Enable or disable the tooltip.
formatter Function
Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on series.
A subset of HTML is supported. The HTML of the tooltip is parsed and converted to SVG, therefore this isn't a complete HTML renderer. The following tabs are supported: b, strong, i, em, br, span tags . Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.
The tooltip can be shared between multiple series through the shared option. The available data in the formatter differ a bit depending on whether the tooltip is shared or not. In a shared tooltip, all properties except x, which is common for all points, are kept in an array, this.points.
Available data are:

this.percentage (not shared) / this.points[i].percentage (shared)
Stacked series and pies only. The point's percentage of the total.
this.point (not shared) / this.points[i].point (shared)
The point object. The point name, if defined, is available through this.point.name.
this.points
In a shared tooltip, this is an array containing all other properties for each point. this.series (not shared) / this.points[i].series (shared) The series object. The series name is available through this.series.name.
this.total (not shared) / this.points[i].total (shared)
Stacked series only. The total value at this point's x value.
this.x
this.y (not shared) / this.points[i].y (shared) The y value.
shadow Boolean true
Whether to apply a drop shadow to the tooltip.
shared Boolean false
When the tooltip is shared, the entire plot area will capture mouse movement, and tooltip texts for all series will be shown in a single bubble. This is recommended for single series charts and for iPad optimized sites.
snap Number 10/25
Proximity snap for graphs or single points. Does not apply to bars, columns and pie slices. It defaults to 10 for mouse-powered devices and 25 for touch devices.
style Array
CSS styles for the tooltip. The tooltip can also be styled through the CSS class .highcharts-tooltip.