Key insights
- Add a 300ms delay before a hover tooltip appears, so it doesn't fire on every accidental cursor graze across the trigger.
- Anchor the tooltip to its trigger with an arrow. Without one, a floating label sitting above a row of icons leaves users guessing which element it actually describes.
- Flip the tooltip to the opposite side when the trigger sits near a viewport edge — otherwise it gets clipped off-screen instead of staying readable.
- Make it dismissible everywhere: mouse leave, the Escape key, focus out (blur), and a tap outside should all close it. Every escape route matters.
- Keep the copy tight — cap the width around 300px and hold it to one sentence. If you need a documentation paragraph, it's not a tooltip anymore.
Do / Don't
- Do: Wait ~300ms before revealing a hover tooltip
- Do: Point at the trigger with an arrow so the reference is unambiguous
- Do: Flip position near viewport edges to prevent clipping
- Don't: Fire instantly on every cursor graze
- Don't: Cram multi-line, documentation-length text into a single tooltip
