Tooltips for Shapes
Drawing shapes are rendered inside a single Surface rather than as individual DOM elements, so they have no native title tooltip. To reveal a label or extra details on hover—for example, the value behind a segment or the name of a region—combine the pointer events of the Surface with a floating container, as shown in the following example.
The example combines three pieces—detecting the hovered shape, storing the content to display, and positioning the tooltip—described in the following sections.
Detecting the Hovered Shape
Bind to the mouseenter and mouseleave events of the Surface to detect when the pointer enters or leaves a shape. The SurfaceEvent argument exposes the target element, which lets you look up the data associated with the hovered shape and decide what to display. Show the tooltip on mouseenter and hide it again on mouseleave.
Storing the Tooltip Content
A shape has no dedicated tooltip property, so attach the content you want to show as a custom field on its options when you create the shape—for example, name or tooltipContent.
const shape = Path.fromRect(rect, {
fill: { color: "#ff0000" },
tooltipContent: "Region A"
});In the mouseenter handler, read that field from element.options. Check that it is set before showing the tooltip, so shapes that carry no content—such as a background or a border—do not trigger one.
Positioning the Tooltip
Position the tooltip with the Popup component by using either of the following approaches:
- Combine
element.bbox(), which returns the shape bounding box in the Surface coordinate space, with the bounding rectangle of the Surface's host element to calculate an absolute position on the page. - Alternatively, anchor the popup directly to the hovered DOM node through
SurfaceEvent.originalEvent.target, when your Popup component supports anchoring to an element instead of a fixed offset.