Tooltip

### Component name

_Tooltip_

### Figma link

_[Figma link](url)_

### Behaviour
(From [comment](https://github.com/vector-im/compound/issues/280#issuecomment-1816458166))
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

```[tasklist]
# Design phase
- [ ] Add Tooltip Web, iOS & Android variant drafts to Compound Figma documents
- [ ] Create new tokens for Tooltip
- [ ] Release Tooltip styles
- [ ] Review Tooltip web implementation & publish in shared Figma library
- [ ] Review Tooltip mobile implementation & publish in shared Figma library
```

```[tasklist]
# Development phase
- [ ] https://github.com/vector-im/compound/issues/163
- [ ] Implement Tooltip on Android
- [ ] Implement Tooltip on iOS
- [ ] https://github.com/vector-im/element-web/pull/26082
```