Component Tooltip

Tooltip

A floating text label that appears next to a trigger on hover or focus. The caller owns a Entity<TooltipState>.

use yororen_ui::headless::button::button;
use yororen_ui::headless::tooltip::{tooltip, TooltipPlacement, TooltipState};

let tooltip_state = TooltipState::new(&mut **cx);
tooltip_state.update(cx, |s, _| {
    s.set_placement(TooltipPlacement::Top);
    s.set_delay_ms(500);
});

tooltip("save-tip", "Save the current file (⌘S)", tooltip_state)
    .trigger(button("save", cx).caption("Save").render(cx))
    .render(cx)

Wire the trigger's hover / focus to toggle the state:

let state = tooltip_state.clone();
.on_hover(move |hovered, _, cx| {
    state.update(cx, |s, _| if hovered { s.open() } else { s.close() });
})

State methods

Method	Purpose
open() / close() / is_open()	Show or hide the tooltip text.
set_placement(p)	TooltipPlacement::Top / Bottom / Left / Right / BottomStart / ….
set_delay_ms(n)	Delay (ms) before showing. Default 0.
set_on_close(f)	Fn(&mut Window, &mut App) + 'static + Send + Sync.

Props

Method	Purpose
trigger(el)	The trigger element (rendered in normal flow).
has_custom_bg(v) / has_custom_fg(v)	Caller overrode background / foreground.

.render(cx) returns Stateful<Div>. Factory takes (id, text, state).

See also: Popover, ShortcutHint.