question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Popover component

See original GitHub issue

Bug, feature request, or proposal:

Feature request

What is the use-case or motivation for changing an existing behavior?

Popovers are not part of the current material design spec, however they are a common component in desktop applications. It got some traction last year within the angular/material repository here and here.

If this is still not acceptable, what are the alternatives? I started to hack a bit on the mdDialog, using a custom positioning strategy and custom css for the directional arrow but I’m not sure this is the way-to-go.

Thank you in advance!

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:129
  • Comments:41 (14 by maintainers)

github_iconTop GitHub Comments

76reactions
joejordanbrowncommented, May 20, 2019

@QuentinFchx

I’ve just created an example popover component, and you can view demo here and the source here it has basic documentation on how to use. If you want to view the demo source you can find that here. It’s using most of the menu component with a few things added/removed. It is not complete it was to give you an example. If I have time, I’ll rewrite it with more functionality and consistent options naming.

Standard popover

image

image

image

Google+ style popover

image

DEMO

Have a play using the StackBlitz template.

56reactions
joejordanbrowncommented, May 20, 2019

After many people contacting me requesting me to publish my demo as a library, I found some time this week to publish it. You can find the GitHub page here https://github.com/material-extended/mde and NPM package here https://www.npmjs.com/package/@material-extended/mde

Have a play using the StackBlitz template.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Popover component - Material UI - MUI
A Popover can be used to display some content on top of another. Things to know when using the Popover component: The component...
Read more >
Popovers - Bootstrap
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Overview. Things to know when...
Read more >
Popover - Ant Design
A simple popup menu to provide extra information or operations. Comparing with Tooltip , besides information Popover card can also provide action elements...
Read more >
Popover - Shopify Polaris
Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.
Read more >
ion-popover - Ionic Framework
Inline Popovers​ ... ion-popover can be used by writing the component directly in your template. This reduces the number of handlers you need...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found