For AI agents: the complete XY documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Components

/

Tooltips in Python

Tooltips in Python

XY shows a built-in hover tooltip by default. With no tooltip component it leads with the hovered series name when one is available, then reports the available x/y values and encoded color or size values. Polar charts label the radial row r and drop the numeric angle, which is layout rather than data. Add tooltip() to choose fields, give source columns readable labels, format values, supply a title template, hide the tooltip, or register framework-rendered content.

Default Hover Tooltip

With a bare xy.tooltip() (or none at all), hovering a point reports its x and y values without any further configuration. A named mark uses its series name as the tooltip title. On a polar chart the readout reports the values — series name, radial value, and any color or size encoding — and leaves the numeric angle out, since the cursor is already sitting on it. An authored spoke label survives, so a radar category reads power rather than a number, and labels={"x": ...} opts the angle back in formatted through the theta axis. Explicit title= and fields= continue to control a customized readout.

Start Building Now!

Choose Fields and Formats

Named source columns that feed x, y, color, size, or heatmap-value channels can be used as tooltip fields:

Start Building Now!

Braced field names in title are replaced from the hovered row. format maps source field names to the client's numeric format strings, while labels maps those same source names to presentation text. Labels never change title placeholder lookup or the event payload. When fields is omitted, labels renames the matching default x/y/color/size rows; direct array channels can use the channel names "x", "y", "color", and "size". A source column that is not bound to a rendered channel is not shipped merely because its name appears in fields.

Title Templates Across Multiple Series

One tooltip configuration serves every mark in the chart: the braced {day} title, the field selection, and the per-field number formats apply to both the dashed forecast line and the margin-sized revenue points below.

Start Building Now!

Exact and Resident Readout

Standalone HTML composes tooltips from the values resident in its payload. With a live notebook or framework transport, an immediate client readout can be replaced by exact canonical f64 values from Python. The on_hover callback receives that exact row rather than tooltip text.

Hide, Style, or Replace

Use show=False to disable built-in tooltips. class_name and style target the tooltip container. Chart-level class_names and styles can target the container plus tooltip_title, tooltip_row, tooltip_label, and tooltip_value, so field labels and values can be aligned or styled independently:

All label and value strings are inserted as text, never parsed as HTML. The last tooltip component supplies the effective configuration.

A positional child or render= object is kept opaque to the core renderer and can be retrieved through chart.chrome_components(). It is not embedded into standalone HTML. For a Chart source, the shipped reflex_xy.chart adapter mounts xy.tooltip(render=...) automatically in the renderer-owned tooltip slot; for a live figure token, pass the Reflex component through reflex_xy.chart(..., tooltip=...). The adapter suppresses the built-in tooltip while the component is mounted and supplies hover data through the normal event path. See Customize Each Part for the complete integration boundary.

See Events and callbacks for hover payloads and Marks and components reference for the exact tooltip signature.

API Reference

xy.tooltip

Configure chart tooltip chrome.

Props

PropTypeDescription
*childrenAny

Optional opaque replacement content.

showbool

Whether to display tooltips.

renderAny

Opaque renderer supplied by an adapter.

fieldsOptional[list[str]]

Data fields shown in each tooltip.

titleOptional[str]

Optional tooltip title.

formatOptional[dict[str, str]]

Per-field value formats.

labelsOptional[dict[str, str]]

Display labels keyed by source field. Without ``fields``, they rename the matching default x/y/color/size rows. Formatting and title placeholders continue to use the source field names.

class_nameOptional[str]

DOM class name applied to the tooltip.

styleOptional[dict[str, StyleValue]]

Tooltip style overrides.

FAQ

How do I show values on hover in a Python chart?

XY shows a built-in hover tooltip by default — with no configuration it reports the available x/y values plus any encoded color or size values. Add xy.tooltip() as a chart child only when you want to choose fields, formats, or a title template.

How do I customize which fields a tooltip shows and how numbers are formatted?

Pass fields= and format= to xy.tooltip(), e.g. xy.tooltip(fields=["revenue", "growth"], labels={"revenue": "Revenue", "growth": "Growth"}, format={"revenue": ",.0f", "growth": ".1%"}). Only source columns bound to a rendered channel (x, y, color, size, or heatmap value) can be used as tooltip fields.

How do I put data values in the tooltip title?

Use braced field names in title=, e.g. xy.tooltip(title="Month {month}") each placeholder is replaced with the value from the hovered row.

How do I disable tooltips on a chart?

Add xy.tooltip(show=False) to the chart. When several tooltip components are present, the last one supplies the effective configuration, so a final show=False wins.

Built with Reflex