Tooltip — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::{Button, Tooltip, Variant};
2use gpui::prelude::*;
3use gpui::px;
4
5row(vec![
6    Tooltip::new("With an arrow")
7        .show_arrow(true)
8        // `offset` is the gap between trigger and panel.
9        .offset(px(10.))
10        .child(
11            Button::new("tooltip-arrow-on")
12                .label("Arrow")
13                .variant(Variant::Secondary),
14        )
15        .into_any_element(),
16    Tooltip::new("Without one")
17        .show_arrow(false)
18        .child(
19            Button::new("tooltip-arrow-off")
20                .label("No arrow")
21                .variant(Variant::Secondary),
22        )
23        .into_any_element(),
24])

Expand code

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

Tooltip

Tooltip is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Tooltip uses.

Styling

Tooltip styling
Style	Description
`p(px(8.)) + small_radius`	Eight-pixel inset and the 12px small radius.
`overlay colors + 12/16px + overlay_shadow/overlay_hairline`	Overlay colours, 12/16px type and overlay shadow, plus the dark-mode overlay hairline.
`shaped max-content width clamped to px(320.)`	Uses max-content width up to Tailwind's xs cap.
`default WhiteSpace::Normal`	Restores normal wrapping but GPUI has no break-all mode for a single unbroken token.
`Motion::POPOVER_IN + entering_zoom`	Fade and zoom match; transform origin and placement slide are absent.
`Motion::LIST_OUT + exiting`	Exit motion matches.
`TOOLTIP_ARROW size(px(12.)) + overlay background + arrow_rotation`	Size, geometry, fill and rotation match; GPUI's single-colour SVG tint cannot add the separate 40% border stroke.
`wrapper relative flex + hover/focus listeners`	The focus wrapper exists, but GPUI has no inline-block display and the three property transitions are not animated.
`contains_focused + child focus treatment`	The wrapper tracks descendant focus to open the tip, but the caller-provided child owns the visible focus ring.
`layout.tooltip_delay_ms`	Theme default before a hovered tooltip opens.
`layout.tooltip_close_delay_ms`	Theme default before a tooltip closes after hover leaves.
`offset.unwrap_or(show_arrow ? 7 : 3)`	Pinned Tooltip.Content default offset logic.
`TooltipPlacement match`	Tip anchoring and arrow rotation for the four cardinals.
`reduce_motion + should_skip_animation`	Reduced motion and the explicit skip both leave the tip fully visible without geometric animation.

API reference

Builders

Tooltip builders
Builder	Type	Default	Description
`new(content) + ParentElement::extend`	`AnyElement`	—	Trigger and content composition; takes tip text positionally and trigger children through ParentElement.
`delay(u64)`	`u64`	`1500`	The pinned docs table says 700; v3.2.4 runtime resolves 1500 from --tooltip-delay, matching pinned 's default.
`close_delay(u64)`	`u64`	`500`	The pinned docs table says zero; v3.2.4 runtime resolves 500 from --tooltip-close-delay, matching pinned 's default.
`trigger(TooltipTrigger)`	`TooltipTrigger`	`TooltipTrigger::Hover`	Hover also answers keyboard focus; Focus ignores pointer hover.
`is_disabled(bool)`	`bool`	`false`	Suppresses the tooltip while leaving its trigger content rendered.
`should_skip_animation(bool)`	`bool`	`false`	Shows and hides without the tooltip animation wrapper.
`new(content)`	`content`	—	Tooltip body content; accepts text rather than arbitrary elements.
`show_arrow(bool)`	`bool`	`false`	Draws the built-in curved arrow.
`offset(Pixels)`	`Pixels`	`3 (7 with arrow)`	Distance from the trigger, including v3's arrow-aware default.
`placement(TooltipPlacement)`	`TooltipPlacement`	`TooltipPlacement::Top`	The four cardinal placements render; RAC's start/end and edge variants are not represented.
`ParentElement::extend`	`AnyElement`	—	Trigger content is composed as the Tooltip's child, but does not expose a separately replaceable trigger part.

Parts

Tooltip parts
Part	Description
`Tooltip`	State owner for delay, trigger mode and open lifecycle.
`Tooltip`	Hover/focus wrapper around caller-provided trigger content; GPUI has no inline-block display mode.
`Tooltip`	Floating overlay surface containing the tooltip text.
`Tooltip`	Optional 12px curved arrow; custom arrow content and the separate 40% border stroke are unavailable.

States

Tooltip states
Builder	State	Description
`TooltipManager + prepare_tooltip_open + start_tooltip_cooldown`	`Global sequence`	Only one tooltip stays open; the first hover waits for delay, later hovers during max(500ms, closeDelay) cooldown open immediately, and the sequence becomes cold again after cooldown.
`overlay_phase Entering + entering_zoom(POPOVER_IN)`	`Entering`	150ms Smooth fade and zoom from 90%; v3's placement-specific 4px translation is not reproduced.
`overlay_phase Exiting + exiting(LIST_OUT)`	`Exiting`	100ms Smooth fade and zoom to 95%.
`TooltipPlacement match`	`Placement`	Cardinal positioning and arrow rotation; start/end variants and attributes are absent.

Alert Dialog Drawer Modal Popover Toast