# Replace voice icon tooltip with an instant, rich popover

| | |
|--|--|
| **ID** | `bug_012` |
| **Priority rank** | 5 |
| **Severity** | medium |
| **Category** | feature_request |
| **Time range** | 250.0s – 262.8s |
| **Key moment** | 256.5s |
| **Affected element** | Voice selection icon |

> ⚠️ **About the red box in `screenshot.png`:** It is an AI-generated guess at the affected
> UI element. **It is correct most of the time but not always** — sometimes the actual
> element is near the box rather than exactly inside it, and occasionally the box lands
> on an unrelated element.
>
> When acting on this bug:
> 1. Read the **narration quote** and **detailed visual walkthrough** below first — they
>    describe what is actually wrong.
> 2. Look at the **full screenshot**, not just inside the red box.
> 3. If you need precise pixel coordinates, consult `omniparser_elements.json` in this
>    folder — it lists every UI element the detector found on this screen, with bounding
>    boxes and confidence. You can search by label or look at elements adjacent to the
>    red box.

## Description

The standard browser tooltip on the voice icon is slow to appear and visually basic. The user requests a custom, floating popover that appears instantly on hover, provides more information, and has a more polished design.

## What the narrator said

> "instead of a tool tip when I hover over it, have like a floating div or something that pops up instantly that looks beautiful and it says this will do to the voice..."

## Detailed visual walkthrough

The screen displays the "Athena v3" application, open to a "Chat" view with a user named "John's Athena". The main panel contains a detailed request titled "Athena needs Google Workspace scanner access". Below this message, a small green icon and the text "Go to model" are visible.

The user moves the cursor from the center of the screen to hover directly over the "Go to model" text. After a brief delay, a standard, light-gray browser tooltip appears with the text "Go to model". While hovering, the narrator expresses dissatisfaction with this behavior, stating, "Okay, you don't have a tooltip... well, there's a little tooltip when I hover over it, but instead of a tooltip when I hover over it, have like a floating div or something that pops up instantly that looks beautiful and it says this will do to the voice..."

The user is requesting that the default, slow-to-appear tooltip be replaced with a custom, visually appealing popover component. This new component should appear instantly on hover and provide richer, more descriptive information about the element's function. The video ends with the cursor still positioned over the text, with the basic tooltip visible, highlighting the current implementation that needs to be improved.

## Suggested fix

Implement a custom UI popover component that triggers on hover of the voice icon. This popover should appear without delay and be styled to match the application's theme. It should serve as a container for voice-related information and controls.

## Bounding boxes drawn on `screenshot.png`

- **Voice selection icon** at `[ymin=556, xmin=145, ymax=578, xmax=158]` (normalized 0-1000)

## Files in this folder

- `clip.mp4` — Video clip (250.0s – 262.8s, plus 2s padding on each side)
- `screenshot.png` — Key frame at 256.5s with red bounding box (see note above on accuracy)
- `screenshot_raw.png` — Same frame, no annotations
- `clip_description.md` — The detailed walkthrough above as a standalone file
- `bug.json` — Structured data
- `omniparser_elements.json` — every UI element detected on this screen by the OmniParser YOLOv8 model, with pixel-space bounding boxes and confidence scores. Useful if the red box in `screenshot.png` is on the wrong element — you can pick a different one from this list.
- `motion/` — Additional keyframes showing motion/state-change (if any):
  _(none — this is a static issue)_
