ui: Use hoverable tooltips for Badge component to fix tooltip behavior (#38387)

## Summary

Fixes #38362 - Privacy tooltip behavior issues in AI Setup onboarding

## Problem
The Privacy tooltip in AI Setup onboarding had incorrect behavior:
1. Tooltip remained visible after mouse left the Privacy button
2. Clicking the button didn't toggle tooltip properly
3. Clicking in intersection area between tooltip and button didn't work

## Root Cause
Badge component used `tooltip()` instead of `hoverable_tooltip()`,
causing:
- Immediate tooltip hiding when mouse left triggering element
- No support for tooltip content interaction
- Poor intersection area click handling

## Solution
**Single line change** in `crates/ui/src/components/badge.rs:61`:
```rust
// Before:
this.tooltip(move |window, cx| tooltip(window, cx))

// After:
this.hoverable_tooltip(move |window, cx| tooltip(window, cx))
```

## Technical Details
- Leverages existing GPUI `hoverable_tooltip()` infrastructure
- Enables 500ms grace period before tooltip hiding
- Allows hovering over tooltip content without disappearing
- Uses proper tooltip bounds detection for click handling
- Affects all Badge tooltips system-wide (positive improvement)
- Full backward compatibility - no API changes

## Test Plan
- [x] Hover over Privacy badge → tooltip appears
- [x] Move mouse away → tooltip stays visible for 500ms
- [x] Move mouse to tooltip content → tooltip remains visible
- [x] Click on tooltip content → properly handled
- [x] Move mouse completely away → tooltip hides after delay
- [x] Verify no regression in other Badge tooltip usage

Release Notes:

- N/A
This commit is contained in:
Devdatta Talele 2025-09-18 20:45:10 +05:30 committed by GitHub
parent fb60f710e3
commit 0a9023bce0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -58,7 +58,7 @@ impl RenderOnce for Badge {
.child(Divider::vertical().color(DividerColor::Border))
.child(Label::new(self.label.clone()).size(LabelSize::Small).ml_1())
.when_some(tooltip, |this, tooltip| {
this.tooltip(move |window, cx| tooltip(window, cx))
this.hoverable_tooltip(move |window, cx| tooltip(window, cx))
})
}
}