.tooltips
class: Tooltip
- class Tooltip(**kwargs)[source]
Options for the tooltip that appears when the user hovers over a series or point.
Class Inheritance
- copy(other=None, overwrite=True, **kwargs)
Copy the configuration settings from this instance to the
other
instance.- Parameters:
other (
HighchartsMeta
) – The target instance to which the properties of this instance should be copied. IfNone
, will create a new instance and populate it with properties copied fromself
. Defaults toNone
.overwrite (
bool
) – ifTrue
, properties inother
that are already set will be overwritten by their counterparts inself
. Defaults toTrue
.kwargs – Additional keyword arguments. Some special descendents of
HighchartsMeta
may have special implementations of this method which rely on additional keyword arguments.
- Returns:
A mutated version of
other
with new property values
- classmethod from_dict(as_dict: dict, allow_snake_case: bool = True)
Construct an instance of the class from a
dict
object.
- classmethod from_js_literal(as_str_or_file, allow_snake_case: bool = True, _break_loop_on_failure: bool = False)
Return a Python object representation of a Highcharts JavaScript object literal.
- Parameters:
as_str_or_file (
str
) – The JavaScript object literal, represented either as astr
or as a filename which contains the JS object literal.allow_snake_case (
bool
) – IfTrue
, interpretssnake_case
keys as equivalent tocamelCase
keys. Defaults toTrue
._break_loop_on_failure (
bool
) – IfTrue
, will break any looping operations in the event of a failure. Otherwise, will attempt to repair the failure. Defaults toFalse
.
- Returns:
A Python object representation of the Highcharts JavaScript object literal.
- Return type:
HighchartsMeta
- classmethod from_json(as_json_or_file, allow_snake_case: bool = True)
Construct an instance of the class from a JSON string.
- Parameters:
as_json_or_file – The JSON string for the object or the filename of a file that contains the JSON string.
allow_snake_case (
bool
) – IfTrue
, interpretssnake_case
keys as equivalent tocamelCase
keys. Defaults toTrue
.
- Returns:
A Python objcet representation of
as_json
.- Return type:
HighchartsMeta
- to_dict() dict
Generate a
dict
representation of the object compatible with the Highcharts JavaScript library.Note
The
dict
representation has a property structure and naming convention that is intentionally consistent with the Highcharts JavaScript library. This is not Pythonic, but it makes managing the interplay between the two languages much, much simpler.
- to_js_literal(filename=None, encoding='utf-8') str | None
Return the object represented as a
str
containing the JavaScript object literal.
- to_json(filename=None, encoding='utf-8')
Generate a JSON string/byte string representation of the object compatible with the Highcharts JavaScript library.
Note
This method will either return a standard
str
or abytes
object depending on the JSON serialization library you are using. For example, if your environment has orjson, the result will be abytes
representation of the string.- Parameters:
- Returns:
A JSON representation of the object compatible with the Highcharts library.
- Return type:
- static trim_dict(untrimmed: dict, to_json: bool = False) dict
Remove keys from
untrimmed
whose values areNone
and convert values that have.to_dict()
methods.
- static trim_iterable(untrimmed, to_json=False)
Convert any
EnforcedNullType
values inuntrimmed
to'null'
.
- property animation: bool | None
Flag which indicates whether animation is enabled on the toltip (
True
).Defaults to
True
.
- property background_color: str | Gradient | Pattern | None
The background color or gradient for the tooltip. Defaults to
None
.
- property border_radius: str | int | float | Decimal | None
The border radius (in pixels) applied to the pane. Defaults to
3
.- Returns:
The border radius of the tooltip.
- Return type:
numeric or
None
- property border_width: int | float | Decimal | None
The border width (in pixels) applied to the tooltip. Defaults to
1
.- Returns:
The border width to apply to the tooltip.
- Return type:
numeric or
None
- property cluster_format: str | None
The HTML of the cluster point’s in the tooltip.
Warning
Works only with
marker-clusters
module and analogously toTooltip.point_format()
.Note
The cluster tooltip can be also formatted using the
Tooltip.formatter()
callback function and thePoint.is_cluster()
flag.
- property date_time_label_formats: DateTimeLabelFormats | None
For series on datetime axes, the date format in the tooltip’s header will by default be guessed based on the closest data points. This property gives the default string representations used for each unit.
Defaults to
None
- Return type:
DateTimeLabelFormats
orNone
- property distance: int | float | Decimal | None
The distance (in pixels) from the point to the tooltip. Defaults to
16
.- Returns:
The distance from the point to the tooltip.
- Return type:
numeric or
None
- property follow_pointer: bool | None
If
True
, the tooltip will follow the mouse pointer as it moves across columns, pie slices, and other point types with an extent. Defaults toFalse
generally, except for pie, polygon, map, sankey, and wordcloud series types where the genericFalse
is over-ridden by default.Note
If
Tooltip.split()
isTrue
, then this property is ignored.
- property follow_touch_move: bool | None
If
True
, the tooltip will follow the single finger touches on a touch base. Defaults toTrue
.Note
If this is
True
andChart.panning()
is set, this property will take over one-finger touch moves so the user will need to use two fingers for zooming and panning.Note
There is a significant difference to behavior when compared to
Tooltip.follow_pointer()
, which updates the position of the tooltip. For example, iffollow_pointer
isFalse
for a column series, the tooltip will show above or below the column. However, whenfollow_touch_move
isTrue
, the tooltip displayed will jump from column to column (above or below the column as applicable) as the user swipes across the plot area.
A string to append to the tooltip format. Defaults to
''
(an empty string).
- property formatter: CallbackFunction | None
JavaScript callback function to format the text of the tooltip from scratch. Defaults to
None
In case of single or
shared
tooltips, it should return an array where the first item is the header, and subsequent items are mapped to the points. Returnfalse
to disable the tooltip for a specific point on a series.Note
A subset of HTML is supported. Unless
Tooltip.use_html()
isTrue
, the HTML of the tooltip is parsed and converted to SVG, therefore this is not a complete HTML renderer. The following HTML tags are supported:b
,br
,em
,i
,span
,strong
.Spans can be styled with a
style
attribute, but only text-related CSS that is shared with SVG will be handled.Note
The available data in the formatter differ a bit depending on whether the tooltip is shared, split, or belongs to a single point. In a shared/split tooltip, all properties except
x
, which is common for all points, are kept in an array,this.points
.Available data are:
this.percentage
(when not shared) /this.points[i].percentage
(when shared): Stacked series and pies only. The point’s percentage of the total.this.point
(when not shared) /this.points[i].point
(when shared): The point object. The point name, if defined, is available throughthis.point.name
.this.points
: In a shared tooltip, this is an array containing all other properties for each point.this.series
(when not shared) /this.points[i].series
(when shared): The series object. The series name is available throughthis.series.name
.this.total
(when not shared) /this.points[i].total
(when shared): Stacked series only. The total value at this point’s x value.this.x
: The x value. This property is the same regardless of the tooltip being shared or not.this.y
(when not shared) /this.points[i].y
(when shared): The y value.
- Return type:
CallbackFunction
orNone
- property header_format: str | None
The HTML of the tooltip header line. Defaults to
None
.Note
Variables are enclosed by curly brackets. Available variables are
point.key
,series.name
,series.color
, and other members from thepoint
andseries
objects.The
point.key
variable contains the category name, x value or datetime string depending on the type of axis. For datetime axes, thepoint.key
date format can be set usingToolTip.x_date_format()
.
- property header_shape: str | None
The name of a symbol to use for the border around the tooltip header.
Defaults to
'callout'
.Note
Applies only when
Tooltip.split()
is enabled.
- property hide_delay: int | None
The number of milliseconds to wait until the tooltip is hidden when mouse out from a point or chart.
Defaults to
{constants.DEFAULT_TOOLTIP.get('hide_delay')}
.
- property null_format: str | None
The HTML of the null point’s line in the tooltip. Defaults to
None
.Note
Works analogously to
Tooltip.point_format()
.
- property null_formatter: CallbackFunction | None
JavaScript callback function to format the text of the tooltip for visible null points.
Note
Works analogously to
Tooltip.formatter()
.- Return type:
CallbackFunction
orNone
- property outside: bool | None
If
True
, allows the tooltip to render outside of the chart’s SVG element box. Defaults toFalse
, which causes the tooltip to be rendered inside the SVG element box which results in the tooltip being rendered inside the chart area.Warning
When setting this property to
False
(the default) on small charts, the tooltip may either clip or overlap parts of the chart itself.When
True
, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.Note
If
Chart.scrollable_plot_area()
isTrue
, then this will default toTrue
. Otherwise, it will default toFalse
.
- property padding: int | float | Decimal | None
The padding inside the tooltip, expressed in pixels.
Defaults to
8
.
- property point_format: str | None
The HTML of the point’s line in the tooltip. Defaults to
None
.Note
Variables are enclosed by curly brackets. Available variables are
point.x
,point.y
,series.name
,series.color
, and other properties of the same form.Furthermore,
point.y
can be extended by theTooltip.value_prefix()
andTooltip.value_suffix()
properties. This can also be overridden for each series, which makes it a good hook for displaying units.
- property point_formatter: CallbackFunction | None
JavaScript callback function to format the text of the tooltip’s point line.
- Return type:
CallbackFunction
orNone
- property positioner: CallbackFunction | None
A JavaScript callback function to place the tooltip in a custom position.
The callback receives three (JavaScript) parameters:
labelWidth
,labelHeight
, andpoint
, wherepoint
contains values forplotX
andplotY
telling where the reference point is in the plot area. Addchart.plotLeft
andchart.plotTop
to get the full coordinates.To find the actual hovered
Point
instance, usethis.chart.hoverPoint
. Forshared
orsplit
tooltips, all the hover points are available inthis.chart.hoverPoints
.The return should be an object containing x and y values, for example:
{ x: 100, y: 100 }
.- Return type:
CallbackFunction
orNone
- property shadow: bool | ShadowOptions | None
Configuration for the shadow to apply to the tooltip. Defaults to
True
.If
False
, no shadow is applied.
- property shape: str | None
The name of the symbol to use for the border around the tooltip. Defaults to
'callout'
.Accepts:
'rect'
'circle'
'callout'
Note
When
Tooltip.split()
is enabled, the shape is applied to all boxes except the header (which is controlled byTooltip.header_shape()
).
When
True
, the entire plot area will capture mouse movement or touch events. Defaults toFalse
.Hint
If
True
, tooltip texts for series types with ordered data (not pie, scatter, flags etc) will be shown in a single bubble. This is recommended for single series charts and for tablet/mobile optimized charts.See also
Tooltip.split()
, which is better suited for charts with many series, especially line-type series. TheTooltip.split()
option takes precedence overTooltip.shared()
.
- property snap: int | float | Decimal | None
Proximity snap for graphs or single points. If
None
, it defaults to10
pixels for mouse-powered devices and25
for touch devices.Defaults to
None
.Note
In most cases, the whole plot area captures the mouse movement, and in these cases
Tooltip.snap()
doesn’t make sense. This applies whenTooltip.sticky_tracking()
isTrue
(default) and when the tooltip isshared
orsplit
.- Return type:
numeric or
None
- property split: bool | None
If
True
, splits the tooltip into one label per series, with the header close to the axis. Defaults toFalse
.Hint
This is recommended over
shared
tooltips for charts with multiple line series, generally making them easier to read.Note
This option takes precedence over
Tooltip.shared()
.
- property stick_on_contact: bool | None
If
True
, prevents the tooltip from switching or closing when touched or pointed. Defaults toFalse
.
- property style: str | None
CSS styling to apply to the tooltip.
Note
The tooltip can also be styled through the CSS class
.highcharts-tooltip
.Warning
The default
pointerEvents
style makes the tooltip ignore mouse events, so in order to use clickable tooltips, this value must be set toauto
.
- property use_html: bool | None
If
True
, will use HTML to render the tooltip. IfFalse
, will use SVG or WebGL as applicable.Defaults to
False
.Hint
Using HTML allows advanced formatting like tables and images in the tooltip. It is also recommended for RTL languages as it works around RTL bugs in early Firefox.
- property value_decimals: int | None
How many decimals to show in each series’ y value. Defaults to
None
, which perserves all decimals.Note
This is overridable in each series’ tooltip options object.
- property value_prefix: str | None
A string to prepend to each series’ y value. Overridable in each series’ tooltip options object. Defaults to
None
.