A popover implementation

[kroeschl]

😯 Problem to Solve

My app, which is in the process of migrating from AngularJS and Bootstrap to Angular and Nimble, uses popovers in several places. This is currently missing from both Nimble and Angular Material despite being included in the Material spec (as a rich tooltip). See for reference:

• feat(tooltip): add support for rich tooltips angular/components#2691
• https://m3.material.io/components/tooltips/overview

Examples of our usage

💁 Proposed Solution

Some solution exists to provide popover content. This would likely be either a distinct nimble-popover attribute or an extension of the existing nimble-tooltip. Specifically, we're looking for programmatic open/close and configurable element positioning.

This request might also just be closed and rolled into #309.

[jattasNI]

Some notes from our initial discussion:

1. related to nimble-tooltip Component #309 but distinct in that this is interactable
2. related to ideas being discussed for NIC 2 Cycle 4 feature adding tooltips to comboboxes
3. might be able to leverage upcoming native popup APIs but those aren't ready yet
4. for the table use cases, you might be able to achieve similar outcomes with an action menu where one of the menu items opens a drawer or dialog that contains the additional context. This would be less immediate than the UX in the gifs but could achieve the same thing.
5. for the picker use case, we'd probably suggest nimble-picker Component #458 once it's available (but it's not currently scheduled)
6. we don't plan to prioritize this immediately, but thanks for filing it! We'll use this issue to collect more use cases.

[kroeschl]

Looking at it some more, I think most of our requirements are met by nimble-tooltip. I'm only having trouble with two features:

• Placement of the tooltip (which fast-tooltip does support).
• Closing on click outside of the tooltip when visible is otherwise manually managed.

I suspect I can work around the second issue, but I'm not sure about the first.

[jattasNI]

@kroeschl could you elaborate on your question? Are you asking how to set the position attribute on nimble-tooltip? What what barrier are you facing and what have you tried?

Also, just in case you hadn't seen, the nimble-tooltip is still marked as Incubating which means the API may change in the future without notice so it's "use at your own risk". Since your app is internal and we don't have an alternative available this might be ok for you, just wanted to make sure you were aware.

[kroeschl]

Are you asking how to set the position attribute on nimble-tooltip?

Yes, I'd like to be able to set the position attribute on fast-tooltip to control where the tooltip actually displays. For example, in one case I'd like the tooltip to always appear to the left of the anchor element.

Edit: I didn't realize that we can set attributes exposed by the wrapped fast-tooltip, so this is already supported. Is that documented somewhere? Or should I be checking what third-party component each of our components wrap in nimble-components to see how I can configure each one? Just trying to understand the workflow.

Also, just in case you hadn't seen, the nimble-tooltip is still marked as Incubating which means the API may change in the future without notice so it's "use at your own risk". Since your app is internal and we don't have an alternative available this might be ok for you, just wanted to make sure you were aware.

Yeah, we're currently doing Nimble version bumps manually so we can check for breakages on incubating components.

[jattasNI]

When a Nimble component is derived from a fast-foundation component, the FAST API will typically work on the Nimble one. We aim to document the supported API in the Nimble docs so if it's not documented it means either it's not officially supported or we forgot to document it. In the cases where we don't officially support it, it's usually because we provide (or plan to provide) an opinionated setting for the API and want to discourage clients from customizing it.

I'm not sure which case the position attribute on the tooltip falls into but since the component is "incubating" the point is somewhat moot. If it works for you now, feel free to use it while noting the caveat that it might go away later along with any other API changes we make as the tooltip matures.

[kroeschl]

Sounds good, thanks for the explanation! With that info, I think we can just use at least the current nimble-tooltip instead of a dedicated popover component, so feel free to close this out unless you think there's a good reason to have a separate component.

[jattasNI]

I'll close this for now and we can revive it or reference it if another request comes in for similar functionality.