## Background
We need to implement the Tooltip component in Codex.
Considerations (from T280677):
- Reconsider the trigger behavior to be more accessible (see T312899)
- Provide more detailed guidelines on the position and size of the pop-up overlay on Desktop vs Mobile
- Also take into account tooltips elsewhere: MultimediaViewer with jquery.tipsy implementation (see existibng implementations below)
### Description
Tooltip component provides additional information when user hovers and/or clicks on it.
### User stories
- As a user, I need additional information about a user interface element in order to understand how to use it more effectively.
### History
- {T312899}
- {T280677}
### Known use cases
| {F37120130} | Tooltip within the Label in a Form Field (it will be implemented in T338282) |
| {F37121929} | Wikifunctions tooltips. They are using the native ones, but they could be replaced with the Codex one once it's implemented. Keep in mind that [[ https://stackoverflow.com/questions/26259665/make-title-attribute-appear-instantly-on-hover | native tooltips work differently in each browser ]]. |
| {F37670383} | [[ https://query.wikidata.org/querybuilder/?uselang=en | Wikidata Query Builder ]] uses the Popover component from the WiKit design system (in deprecation). |
### Existing implementations
These artifacts are listed for context and to inform design and development. The figma spec, linked below, will be the source of truth for the new component.
| {F34408572} {F34408574} | Tooltips in OOUI, seen on Special:Preferences > Notifications (Desktop and mobile) |
| {F34438400}| MultimediaViewer with jquery.tipsy implementation |
| {F37114658} | Growth implementation in Vue (See related task T340199) |
| {F37121012} | Popover in [[ https://wmde.github.io/wikit/?path=/story/vue_popover--basic | WMDE Wikit ]] |
| {F41713385} {F41713386} {F41713387} | Popups with different content in Wikipedia. |
**Wikimedia community:**
- **Design style guide:** -
- **OOUI:** -
- **Vue:** -
**External libraries:**
- [[ https://m3.material.io/components/tooltips/overview | Material Android - Tooltips ]]
---
## Codex implementation
### Component task owners
- Designer: //add the main designer's name//
- Developer: //add the main developer's name//
### Open questions
[] Do we want to implement both the small dark tooltip and the big white one within the same Tooltip component? Or do we want to separate them into `Tooltip` and `Popup`?
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
A component spec sheet has not been created yet.
| Component spec sheet |
#### Anatomy
//Designer should list the structure and properties of the component.//
#### Style
//Designer should list the visual features of the component.//
#### Interaction
//Designer should list interaction specifications.//
#### Documentation
//Designer should describe how the component should be documented, including configurable and standalone demos.//
---
## Acceptance criteria
### Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
**MVP scope**
- [] //List all parts of the MVP scope for this component//
**Design**
- [] Design the Figma spec sheet and add a link to it in this task
- [] Update the component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891:4420&viewport=287,338,0.28). //This step will be done by a DST member.//
**Code**
- [] Implement the Vue component in Codex
- [] Implement the CSS-only component in Codex (optional -- TBD as part of refinement)
### Future work
- //If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.//