Display a tooltip on the multi-select when the selected option list is truncated
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
Add a tooltip to the multi-select which is displayed when the list of selected options in the input field is truncated. It should inform the user how many options have been selected.
## 💬 Description
When the user selects many options, they can't always be displayed fully in the input field and the text is therefore truncated.
To prevent the user having to open the dropdown menu to see how many are selected, a tooltip should be added (which is only displayed when the text is truncated). This should show a count of how many options are selected - rather than a list of the actual options that are selected.
## 💰 User value
This will make it easier to provide information to the user about their selections without them having to open the dropdown menu.
## 📝 Acceptance Criteria
*Given* that I can make multiple selections and I may not be able to see all my selections in the field
*When* I hover over the multi-select field input
*Then* a tooltip should display showing the number of selected options: "5 options selected"
*And* the tooltip should not display when the dropdown menu is open as this information is displayed in the menu.
## Additional info
Adding a tooltip will probably involve wrapping the multi-select in an ic-tooltip. This means an extra layer of elements so it would be important to check the accessibility of this - ensuring it doesn't affect screen reader functionality.
Contributor guide
Research direction
Locate the multi-select component and existing ic-tooltip usage, then inspect how selected options are truncated and how the dropdown open state is handled. Implement the tooltip behavior described in the acceptance criteria, including the selected-option count and hidden state while open, and verify that the extra wrapper does not impair screen-reader behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100