mi6 / mi6/ic-ui-kit

Display a tooltip on the multi-select when the selected option list is truncated

Open
#1,109 3 comments 0 reactions 0 assignees View on GitHub
a11y multi-select component select component
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.