nimble-tooltip Component

[m-akinc]

😯 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. Spec for nimble-tooltip #595
2. Tooltip Blazor Integration #664
3. Tooltip angular integration #654
4. Tooltip spec - states update #622
5. Nimble tooltip implementation #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
• Visual design for tooltip content variations #929

📋 Tasks

Beta Give feedback

1. Visual design for tooltip content variations #929
   visual design +1
   
2. Spec for nimble-tooltip #595
   +0
3. nimble-tooltip custom element
4. nimble-tooltip unit tests
5. nimble-tooltip Storybook tests
6. nimble-tooltip Storybook docs
7. nimble-tooltip Angular wrapper
8. nimble-tooltip Blazor wrapper
9. Add to Angular example app
10. Add to Blazor example app
11. Update Component Status table in README
12. Investigate tooltip test failures in Firefox (if we keep current implementation and tests)

---

Related PRs

Beta Give feedback

1. Spec for nimble-tooltip #595
   +0

[jattasNI]

@rajsite suggested we should do some research on:

1. how to make a tooltip accessible
2. how to extend existing templates to use tooltips

[rajsite]

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]

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]

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]

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

[msmithNI]

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

[m-akinc]

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]

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]

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]

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.