ni / ni/nimble

nimble-tooltip Component

Open
#309 11 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement needs investigation new component
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
  1. #595
  2. #664
  3. #654
  4. #622
  5. #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

## 📋 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.