Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A popover implementation #1583

Closed
kroeschl opened this issue Oct 3, 2023 · 7 comments
Closed

A popover implementation #1583

kroeschl opened this issue Oct 3, 2023 · 7 comments
Labels
client request Client team would immediately benefit from this change enhancement New feature or request

Comments

@kroeschl
Copy link

kroeschl commented Oct 3, 2023

😯 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:

Examples of our usage

popover-claim
popover-other
popover-tags

💁 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.

@kroeschl kroeschl added enhancement New feature or request triage New issue that needs to be reviewed labels Oct 3, 2023
@jattasNI jattasNI added client request Client team would immediately benefit from this change and removed triage New issue that needs to be reviewed labels Oct 3, 2023
@jattasNI
Copy link
Contributor

jattasNI commented Oct 3, 2023

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
Copy link
Author

kroeschl commented Oct 5, 2023

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
Copy link
Contributor

@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
Copy link
Author

kroeschl commented Oct 10, 2023

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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

@jattasNI jattasNI closed this as not planned Won't fix, can't repro, duplicate, stale Oct 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client request Client team would immediately benefit from this change enhancement New feature or request
Projects
Development

No branches or pull requests

2 participants