Internal issue 3161 - Add support for tooltips on non-icon toggle buttons
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
NOTE: Screenshots available internally
h3. Summary
Add the ability to display tooltips on any toggle button. This would match the existing behaviour of regular buttons.
h3. 💬 Description
{{IcButton}} s have the options {{title}} and {{tooltipPlacement}} to add an {{IcTooltip}} to the button ([see ICDS website example|https://design.sis.gov.uk/components/inputs/button/code/#tooltip] and attachment 1). {{IcToggleButton}} s have these props but they don’t create an {{IcTooltip}}, instead using the browser's built-in tooltips (attachment 2). Trying to manually add an {{IcTooltip}} can break styling inherited from an {{IcToggleButtonGroup}} (attachment 3).
h3. 💰 Use value
Behaviour already exists for standard buttons. Will be useful in cases where new functionality won’t be immediately clear to users used to legacy platforms; tooltip helps explain function of button.
h3. 📝 Acceptance Criteria
Given a toggle button
When a user hovers over it with their mouse
Then a tooltip appears
h3. 🚨 Urgency (low, medium or high)
Medium
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the IcToggleButton, IcToggleButtonGroup, IcButton, and IcTooltip components, then compare how IcButton creates tooltips from its title and tooltipPlacement props. The work is done when hovering a toggle button displays the tooltip without breaking IcToggleButtonGroup styling, as described by the acceptance criterion.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100