ui/
tooltip.rs

1//! [`Tooltip`] — the small hover label.
2//!
3//! An entity rather than a function because gpui's `.tooltip(..)` takes a
4//! builder returning an `AnyView`: the tooltip is mounted in its own layer,
5//! after the hover delay, so it cannot be an inline element.
6//!
7//! ```ignore
8//! use ui::tooltip::Tooltip;
9//!
10//! div()
11//!     .id("copy")
12//!     .tooltip(|window, cx| Tooltip::text("Copy path", window, cx))
13//!     .child("⌘C")
14//! ```
15
16use gpui::{AnyView, App, Context, IntoElement, SharedString, Window, div, prelude::*, px};
17
18use theme::{TextStyle, Theme, Typeset};
19
20use crate::{popover, surface::Surfaced as _};
21
22pub struct Tooltip {
23    text: SharedString,
24    /// Optional keystroke shown right-aligned, e.g. `⌘C`.
25    keystroke: Option<SharedString>,
26}
27
28impl Tooltip {
29    /// A plain text tooltip, built for `.tooltip(..)`.
30    pub fn text(text: impl Into<SharedString>, _window: &mut Window, cx: &mut App) -> AnyView {
31        let text = text.into();
32        cx.new(|_| Self {
33            text,
34            keystroke: None,
35        })
36        .into()
37    }
38
39    /// A tooltip that also names the shortcut — the pairing that keeps
40    /// keyboard affordances discoverable without a menu.
41    pub fn with_keystroke(
42        text: impl Into<SharedString>,
43        keystroke: impl Into<SharedString>,
44        _window: &mut Window,
45        cx: &mut App,
46    ) -> AnyView {
47        let (text, keystroke) = (text.into(), keystroke.into());
48        cx.new(|_| Self {
49            text,
50            keystroke: Some(keystroke),
51        })
52        .into()
53    }
54}
55
56impl Render for Tooltip {
57    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
58        let theme = Theme::of(cx).clone();
59        // Tooltips are small and frequent, so this is a tighter card than
60        // `popover_card`: less padding, no menu rhythm.
61        popover::popover_card(&theme)
62            .px(px(8.0))
63            .py(px(5.0))
64            .flex()
65            .flex_row()
66            .items_center()
67            .gap(px(Theme::SPACE))
68            .text_style(TextStyle::Callout)
69            .text_color(theme.text)
70            .child(self.text.clone())
71            .when_some(self.keystroke.clone(), |card, keystroke| {
72                card.child(
73                    div()
74                        .text_style(TextStyle::Subheadline)
75                        .text_color(theme.text_faint)
76                        .child(keystroke),
77                )
78            })
79            .surface(&theme, theme.popover_surface)
80    }
81}
ui/tooltip.rs

ui/
tooltip.rs
