nimble-tooltip Component

m-akinc commented 2 years ago

😯 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

jattasNI commented 2 years ago

@rajsite suggested we should do some research on:

how to make a tooltip accessible
how to extend existing templates to use tooltips

rajsite commented 2 years ago

Secretly @rajsite is holding out to see how much progress the popup spec makes hoping it'll make tooltips a less invasive to add and more accessible. Also will help with interactions between components: https://github.com/mfreed7/popup#classes-of-ui---dismiss-behavior-and-interactions

jattasNI commented 2 years ago

In this AzDO HLD one of the mockups shows a tooltip with formatted content (bold text and a simple table). Have we considered whether/how clients could achieve this via the nimble-tooltip?

jattasNI commented 2 years ago

This web.dev article came across my feed from a couple different sources: How to write an accessible tooltip. I haven't read it in detail but when we pick up this component again it would be good to ensure our component is accessible and this may give hints about the right way to do that.

nate-ni commented 1 year ago

In this AzDO HLD one of the mockups shows a tooltip with formatted content (bold text and a simple table). Have we considered whether/how clients could achieve this via the nimble-tooltip?

@jattasNI, this type of layout appears possible with the FAST Tooltip as it seems to support arbitrary content within the tooltip. We'll need to consider the visual design implications since we provide some variations.

jattasNI commented 1 year ago

Nice, turns out we even have an example of that now in our storybook.

msmithNI commented 1 year ago

For details on the failing tests in Firefox, see #1075

m-akinc commented 1 year ago

I enumerated some potential approaches for the tooltip API, and as a team we came to the consensus that what we want (slot-based API) is not worth implementing now, but may become easier in the future when FAST makes it easier to extend component templates. As such, we're deprioritizing this component. Refer to the spec for details about the approach options.

jattasNI commented 1 year ago

The LiMo project has a use case for a tooltip to briefly show a toast-like success message next to a button that was clicked. They would use the visible attribute to show it when the button is clicked and hide automatically a few seconds later. They might want to be able to control the padding between the tooltip and its anchor and control which side of the anchor the tooltip is shown from (looks like this is possible in FAST but not documented in Nimble). In future they may also want a success severity and the ability to slot a ✅ icon next to the text.

Some of this sounds a bit like a "toggle-tip button" that is programmatically dismissed after a delay.

jattasNI commented 4 months ago

SLE had another use case for a rich text tooltip in this PR. They're using a multi-line title in the calendar / scheduling workflow.

jattasNI commented 1 month ago

Just leaving a comment to link this issue with #2406. The proposal there was to reconsider this component's long term home as part of #1876.

ni / nimble