Tooltip

[germain-gg]

Component name

Tooltip

Figma link

Figma link

Behaviour

(From comment)
After further considering other use cases besides room header and details, here are more general rules-of-thumb:

DESKTOP

For non-labelled, interactive elements that do something: Show a tooltip on hover after a 300ms delay

• Any Icon-only buttons that performs some action

For non-labelled, interactive elements that do nothing: Show a tooltip on hover instantly

• Room decoration (public, encryption, trusted, not trusted, etc.)
• Status indicators
• Disabled buttons of any kind

Exceptions: Depends on the use case

• Facepile in a timeline on the right
  • On hover there is valuable information with a changing value ("Seen by X people"), therefore show the tooltip instantly
• Room description on room detail view
  • By default the room description is collapsed into an interactive component (essentially a big button). The summary itself is not technically a label, but the hover state on-rollover indicates that the element is interactive. So, there's no need to show any further tooltip at all.
  • Other examples we'll discover along the way :)

MOBILE

• IF possible, show a tooltip after long-pressing any non-labelled, interactive element

---

Lemme know if you disagree with anything above

Design phase

Beta Give feedback

1. Add Tooltip Web, iOS & Android variant drafts to Compound Figma documents
2. Create new tokens for Tooltip
3. Release Tooltip styles
4. Review Tooltip web implementation & publish in shared Figma library
5. Review Tooltip mobile implementation & publish in shared Figma library

Development phase

Beta Give feedback

1. Implement Tooltip on Web vector-im/compound#163
   +0
   
2. Implement Tooltip on Android
3. Implement Tooltip on iOS
4. Make SVGR icons use forward ref vector-im/element-web#26082
   T-Enhancement +1

[t3chguy]

Tooltips are now a thing. @florianduros @robintown can this be closed?

[florianduros]

Hmmm, it's also about the mobile. I don't the know the current state of the mobile tooltip