Page MenuHomePhabricator

Label: Add tooltip
Open, MediumPublic

Description

Background

The design spec for the Label component includes an optional tooltip after the label text. This should be implemented after the Tooltip component is built in T340456: Tooltip: Add Tooltip component to Codex.

Known use cases

Design spec

Open questions

  1. How should the tooltip text be passed into Field and Label? Probably via a prop - what should it be called in each component?
  2. What should the placement of the tooltip be? Probably top-start.
  3. What element should be used for the info icon? An icon, or a button? Should there be accessible text that explains that there's more information in the tooltip? If so, we'll need a new translated message for that.

Acceptance criteria

  • The Tooltip component is used inside Label to add an optional tooltip
  • A new prop or slot is added for the tooltip text to both Label and Field
  • Tooltip is documented on the Label and Field demo pages (in the "about" sections and configurable demos. No separate demo is needed.)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE updated the task description. (Show Details)
CCiufo-WMF triaged this task as Medium priority.Jul 9 2024, 7:13 PM
CCiufo-WMF moved this task from Backlog to Up Next on the Design-System-Team board.

Hi! Moderator Tools is working on Migrating Nuke to codex T375757. We wanted to use the label tooltip to indicate additional information for one of the filters T380846#10414129 (Figma). Was wondering when/if you will be prioritising this component?

@AnneT when we've discussed this in the past, it was seen as a pretty trivial task once the subtasks were complete. Do you feel that's still the case?

@CCiufo-WMF yes, this will be easy to implement! We'll need to decide exactly how the tooltip text should be passed in (likely via a prop, that will need to be added to both Field and Label) and what the placement should be (likely top-start) - I'll update the task to reflect the full acceptance criteria.

@CCiufo-WMF ok, I would say it's not exactly trivial, but implementation is straightforward once we answer the open questions. I'd estimate this as a 2-3 point task.

@AnneT ok thanks! We can discuss it at the next refinement meeting.