From abf9c480d31c4bc7c09ec2ea4422d0b2c9eacc15 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 17 Feb 2026 19:39:11 +0000
Subject: [PATCH] feat(ux): Add tooltips to navigation bar icon buttons

- Added tooltips for 'Home', 'Add Room', 'Settings', and 'Toggle Spaces' buttons in the navigation bar.
- Tooltips are positioned to the right on desktop and above on mobile, improving accessibility and usability for icon-only controls.
- Implemented using `TooltipAction::HoverIn` and `HoverOut` events within `NavigationTabBar::handle_event`.

Co-authored-by: kevinaboos <1139460+kevinaboos@users.noreply.github.com>
---
 .Jules/palette.md              |  3 ++
 src/home/navigation_tab_bar.rs | 60 ++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..7f371ce5
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-23 - Icon-Only Buttons and Tooltips
+**Learning:** Icon-only buttons (like in the navigation bar) often lack text labels for space efficiency, but this hurts accessibility and usability for new users. Adding tooltips is a crucial micro-UX improvement.
+**Action:** Always check `NavigationTabBar` and similar component-dense areas for icon-only buttons and ensure they emit `TooltipAction::HoverIn`/`HoverOut` events. Use `cx.display_context.is_desktop()` to position tooltips correctly (Right for desktop sidebar, Top for mobile bottom bar).
diff --git a/src/home/navigation_tab_bar.rs b/src/home/navigation_tab_bar.rs
index 852dfe26..b9b4166d 100644
--- a/src/home/navigation_tab_bar.rs
+++ b/src/home/navigation_tab_bar.rs
@@ -473,6 +473,66 @@ impl Widget for NavigationTabBar {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
 
+        let tooltip_pos = if cx.display_context.is_desktop() {
+            TooltipPosition::Right
+        } else {
+            TooltipPosition::Top
+        };
+
+        let buttons = [
+            (ids!(home_button), "Home"),
+            (ids!(add_room_button), "Add Room"),
+            (ids!(settings_button), "Settings"),
+        ];
+
+        for (id, text) in buttons {
+            let button = self.view.radio_button(id);
+            match event.hits(cx, button.area()) {
+                Hit::FingerHoverIn(_) => {
+                    cx.widget_action(
+                        self.widget_uid(),
+                        &scope.path,
+                        TooltipAction::HoverIn {
+                            text: text.to_string(),
+                            widget_rect: button.area().rect(cx),
+                            options: CalloutTooltipOptions {
+                                position: tooltip_pos.clone(),
+                                ..Default::default()
+                            },
+                        },
+                    );
+                }
+                Hit::FingerHoverOut(_) => {
+                    cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
+                }
+                _ => {}
+            }
+        }
+
+        if !cx.display_context.is_desktop() {
+            let button = self.view.button(ids!(toggle_spaces_bar_button));
+            match event.hits(cx, button.area()) {
+                Hit::FingerHoverIn(_) => {
+                    cx.widget_action(
+                        self.widget_uid(),
+                        &scope.path,
+                        TooltipAction::HoverIn {
+                            text: "Toggle Spaces".to_string(),
+                            widget_rect: button.area().rect(cx),
+                            options: CalloutTooltipOptions {
+                                position: tooltip_pos.clone(),
+                                ..Default::default()
+                            },
+                        },
+                    );
+                }
+                Hit::FingerHoverOut(_) => {
+                    cx.widget_action(self.widget_uid(), &scope.path, TooltipAction::HoverOut);
+                }
+                _ => {}
+            }
+        }
+
         if let Event::Actions(actions) = event {
             // Handle one of the radio buttons being clicked (selected).
             let radio_button_set = self.view.radio_button_set(ids_array!(