nimble-tooltip Component
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 39
- Forks
- 14
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 13
Description
😯 Problem to Solve
Nimble should provide a tooltip component.
Current status
We have the beginnings of a tooltip component thanks to Aiden's intern work (PRs listed below). There have been some concerns around potential issues of the current implementation that we would like to validate and, if needed, resolve before recommending this component be adopted for our users.
Some potential issues for the current implementation noted:
- Usability concerns of using ID's
- Challenges of it being used in Shared Libraries, due to many and potentially duplicate ID's
Previous work
- #595
- #664
- #654
- #622
- #608
External References
Angular Material Tooltip - Uses Angular specific functionality (Directive)
Carbon Design System - Uses tooltip component as a wrapper over content.
Atlassian Design System - Also uses a wrapper component
Adobe Spectrum (React) - Uses a "Trigger" wrapper along with a standalone component.
FAST - Uses "anchor" attribute and id. This is our current implementation.
💁 Proposed Solution
- FAST component: https://www.fast.design/docs/components/tooltip
- XD Design https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/specs/
- Additional Design Issue
- #929
## 📋 Tasks
- [x] #929
- [x] #595
- [ ] nimble-tooltip custom element
- [ ] nimble-tooltip unit tests
- [ ] nimble-tooltip Storybook tests
- [ ] nimble-tooltip Storybook docs
- [ ] nimble-tooltip Angular wrapper
- [ ] nimble-tooltip Blazor wrapper
- [ ] Add to Angular example app
- [ ] Add to Blazor example app
- [ ] Update Component Status table in README
- [ ] Investigate tooltip test failures in Firefox (if we keep current implementation and tests)
### Related PRs
- [ ] #595
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 reviewing the prior work in #595, #664, #654, #622, and #608, along with design issue #929 and the referenced tooltip implementations. Determine the intended approach for the custom element and its usability concerns before implementing it. Done includes the listed unit tests, Storybook tests and docs, framework wrappers, example-app updates, and README status update.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100