Material: mdPopover: use mdPanel to create popover example

[ThomasBurleson]

Unlike tooltips which have minimal content, popups can have sophisticated, rich content and should also use a directional indicator pointing to the originating/requesting element:

Example #1:

Popovers are intended to have rich content that may be fully interactive.

[ThomasBurleson]

This is related to the Pull Request #1132.

[ThomasBurleson]

This specifications for this feature have been requested from the Material Design UX team. [response pending]

[epelc]

Would this be something you can click on links inside of or just for showing content?

[ThomasBurleson]

Popovers are intended to have rich content that may be fully interactive.

Tooltips, however, are:

• terse,
• read-only,
• transient,
• self-closing,
• single-line,
• informational constructs:

[ccarpediem]

So something a bit like a material version of DropJS (http://github.hubspot.com/drop/docs/welcome/)? If so I really like the idea. Covers that ground where you need a richer experience than a tooltip but without being as obtrusive as a dialog taking over your screen.

[ThomasBurleson]

@ccarpediem - yes.

[ajoslin]

This is just a <md-tooltip> with large content and a class added to it.

[stevenh77]

@ccarpediem Here is my implementation for material design: https://github.com/stevenh77/drop-ng

@ajoslin tooltips appear on hover whereas my implementation of a popover is activated on click.

Here is the bootstrap version: http://getbootstrap.com/javascript/#popovers

[ccarpediem]

@stevenh77 Looks good. One additional thing I think would be nice, is an optional parameter you could pass to define how it closes. Right now, it seems you need to click the button again to close it. I can see the option of just clicking anywhere on the screen closing it like tooltip and dialog would at least be nice option to have. Not sure which is the better default behavior.

[ItsLeeOwen]

Nice work @stevenh77

Where does the options reference "options.rootElementKeyupCallback" on line 113 come from? https://github.com/stevenh77/material/blob/popover-feature/src/components/popover/popover.js#L113

Problem being placed in scroll sections: https://www.dropbox.com/s/gx85c9qkz729a4h/angular-material-popover.mp4?dl=0

It should also probably follow the material design principles, animating out from the interaction point, or whatever that fanciness would be, like the tooltip, or dialog do.

[ilanbiala]

@stevenh77 is there the option to change how quickly it opens? What about making it more material open from click location and expand style?

[stevenh77]

@ilanbiala @ccarpediem @ItsLeeOwen not currently but you're welcome to add the functionality.

@ItsLeeOwen that's deregistering the "escape key to close" functionality.

[stevenh77]

@ItsLeeOwen scrolling fixed

[stevenh77]

Replacement pull request: https://github.com/angular/material/pull/1324

[stevenh77]

@ccarpediem hopefully material design will decide to include a popover component. In the meantime if anyone wants to use dropjs I've created an Angular wrapper called drop-ng, available through bower. http://github.com/stevenh77/drop-ng

[rschmukler]

As per review with UX team, popover's aren't intended in material design's spec. A floating card originating from a point would be a better UX.

[ThomasBurleson]

@stevenh77 - Your fork demonstrates the Popover in a very nice way. Thank you for such a nicely done submission to Angular Material. The UX team, however, wants to clearly separate the usages of tooltips from floatingCards and fear that Popovers violate the Material Design concepts. Much of the work you have done will be used as consideration when the "Floating Card" is implemented.

[ItsLeeOwen]

The dialog component is just a few tweaks away from being a great "popover", "floating card", "thing that displays interactive content positioned aside, above, or below the interaction point"... whatever a UX team wants to call it. This is the result of only a few changes to the dialog onShow method, and stylesheet. And you get the benefit of useful functionality found in $mdDialog, which I don't see in the mdCard directive.

[ItsLeeOwen]

I've added a "position" option to $mdDialog.show() to provide 8 possible layout configurations that are "popover-like". Here's a visual example:

https://www.dropbox.com/s/n9gcq9g2fudjnzk/angular-material-dialog-positioning.mp4?dl=0

[shlomozippel]

@ItsLeeOwen Can you please share the dialog positioning code? Thanks! :)

[ItsLeeOwen]

@shlomozippel https://github.com/ItsLeeOwen/material/tree/dialog-position

[ThomasBurleson]

Reopening. More discussions with UX team planned.

[cah-alexsukhodolsky]

+1

[erasmus]

+1

[kramer65]

@ItsLeeOwen - Your tweaked dialog component looks awesome, and exactly the thing we've been looking for for days. You link to your forked version of Angularjs, but I'm unsure how we can use your positional dialog component. Do you have a description/blogpost/tutorial somewhere of how to use it in our code and which of your libs we need to include for that?

You would really make our day, no actually, you would make our year if we get your dialog working! :D

[EladBezalel]

:+1:

[cranesandcaff]

@ItsLeeOwen Your tweak is awesome, could you comment where I could look to find the changes so I can port them? Would it be possible to separate them to remove the need to fork ngMaterial?

[kschwidder]

+1

[morgs32]

I think the popover is best suited for tours and intros. Here are some examples of Google doing so.

[morgs32]

I wrote to google support and asked them to open source the new tour of google forms.
https://docs.google.com/forms/
Open a new form. Then click the menu item (3 dots) and choose "What's new". Pretty good-looking.

[epelc]

It can be used for several other things too.

For instance hovering over channels on YouTube shows a nice popover. Our
use case would be similar to youtubes.

On Thursday, November 12, 2015, Morgan Intrator [email protected]
wrote:

I think the popover is best suited for tours and intros. Here are some
examples of Google doing so.
[image: image]
https://cloud.githubusercontent.com/assets/1364795/11134067/09764468-8968-11e5-9aae-d7e05e1dbd20.png
[image: image]
https://cloud.githubusercontent.com/assets/1364795/11134069/110cd066-8968-11e5-9464-a5f31a51a3dd.png

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/1217#issuecomment-156265315.

Thank you,
Ed Pelc

[JobaDiniz]

+1

[uditalias]

+1

[kalokamgit]

+1

[kmgilbert100]

+1

[timurabdurafeev]

+1

[ganySA]

+1

[reinos]

+1

[kmgilbert100]

Popover = I can make a material design guided tour package.

[mrbatista]

+1

[pdore-netfore]

+1

[fabiomig]

+1

[hughred22]

+1

[idostern]

+1

[cah-alexsukhodolsky]

+1

[italoayres]

+1

[csvan]

+1

[csvan]

Relevant: https://github.com/angular/material/issues/1120

[samuelcastro]

@stevenh77 How can I use md-popover like described here: http://stevenhollidge.com/docs/#/demo/material.components.popover.

I've noticed md-popover was not merged yet in the main branch.

[stevenh77]

@samuelcastro I was asked by the material team to carry out a fair bit of work to get it accepted, which I did. The team then decided to go down a different path. 12 months on it doesn't look like they have come up with a better solution.

[samuelcastro]

@stevenh77 So, you mean that there is no way to use the md-popover yet right?

Don't you have it forked in your own github?

[stevenh77]

@samuelcastro The pull request was rejected so I pulled the pull request :) : https://github.com/angular/material/pull/1132

I ended up using my own solution instead: https://github.com/stevenh77/drop-ng

[samuelcastro]

@stevenh77 Nice, does that support html content like the popover one?

[stevenh77]

@samuelcastro Yep! It's the angular wrapper for this project: https://github.com/HubSpot/drop

[samuelcastro]

@stevenh77 Awesome, thank you a lot.

[bistory]

+1, hoping this will help the component getting some love...

[marydruzina]

+1

[smurugavel]

+1

[SmoshySmosh]

+1

[aaroncalderon]

I am rewriting a little app I had originally made with JQuery and a bunch of JQuery Components (too many to list them here and keep a straight face), so, I embarked on my quest to rewrite the app with AngularJS.

Turns out many of the things I had to code are 'magically' solved by Angular's two way binding. As I go along I bring in another feature from the production app to my Angular app. It does look a little different but I have managed to keep the overall layout and fell close enough. However, I have a settings popover that pulls down from a button. I had used bootstrap originally to achieve that. Now, I am trying to deliver a similar user experience, but other than using the dialog component, this feature would solve my needs.

It is discouraging to see a feature that Angular users want, to be neglected. I understand that the Angular team is busy, but it would mean the world to me (and so many others) if you could look in to this issue please.

Thanks for your time and effort in advance.

[vishwajeetv]

@stevenh77 @ccarpediem the link you've shared for the source code is not working. Can you share updated github link ?

[stevenh77]

@vishwajeetv my material design popover pull request was rejected over a year ago. I recommend using this instead: https://github.com/stevenh77/drop-ng

Or wait for the material design team to come up with the official feature.

[aaroncalderon]

After some searching I found the following possible solutions:

• nsPopover
• angular-popover-toggle (needs ui.bootstrap)
• angular-rt-popup

They are not dependent on Bootstrap.

I have tried to look for a "Floating Card" sample on the web, but I just cant find one. Perhaps I will try to use one of the above and use an md-card as template...

[jftsaraiva]

+1

[stephengardner]

Holy bananas someone include this module. I just found angular material and it's the only module I've found that re-positions the tooltip when the window cuts it off on one side. That'd be nice to see a popover with the same feature.
+1...

[norrisrb]

Google's UX recommends a floating card but looks like there using a popover in Material Gmail and Google Play

[sheyooo]

+1

[arthurspa]

+1

[patorjk]

+1

[timbrown81]

+1 silly to have such great functionally sitting on the bench yelling "put me in coach!"

[timc13]

+1

[evanjmg]

+1

[Misiu]

+1

[ThomasBurleson]

@here - FYI - we are actively working on a *_md-panel *_ feature that can be used to easily create popups (modal or non-modal). The component features will include better support for:

• modal or non-modal use,
• optional backdrop,
• positioning (exact, relative, relative with offset),
• animations, and
• more....

@stevenh77 provided an implementation of Popover last year. #kudos. We have not forgotten that component. Its ideas and solutions will be blended with mdPanel.

[stidiovip]

+1, this component will make me happy ;)

[kazemihabib]

+1

[HipsterZipster]

@ThomasBurleson
Is there a feature branch for this new md-panel feature branch at the moment so we can follow the progress more actively?
What's the current timeline on when this should be merged back into master? (or at least ready for some beta testing)

[mohsinmuzawar]

+1 This component will make my life easier :smile:

[Ilya93]

+1

[jexneedls]

+1

[thariel]

+1

[ThomasBurleson]

Stay tuned... coming soon in master will be a new component md-panel which will make custom popups almost trivial. Expect to see something after mid-May.

[stephengardner]

Has master incorporated this? Any ETA for version release? It's been 10 days.
Thanks team. You rock

[aaroncalderon]

I think the md-pannel is still a work in progress. There are a few closed issues regarding the md-panel.

I fond a branch named after this feature as well, feat(panel).

Hope this helps.

[ErinCoughlan]

mdPanel has been merged to master. This service makes adding floating elements (like mdPopover) easy to implement while keeping a consistent API.

[stephengardner]

@ErinCoughlan That's great news thank you!

Does anyone have any demo or documentation for it? I know it'll come in time, but quite eager.

[EladBezalel]

@stephengardner
https://material.angularjs.org/HEAD/demo/panel

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[sky-coding]

EDIT: Resolved, thanks!

[stevenh77]

@sky-coding I've removed the URL to the old online demo as it was a couple of years old but it's still within @samuelcastro comment, any chance you could edit your comment to remove it? Thanks. If anyone wants the code they can download from github: https://github.com/stevenh77/drop-ng

[Misiu]

@ErinCoughlan @EladBezalel could You guys maybe add demo showing how to use panel as Popover? Example like Google notifications (bell icon in top right corner on google maps) would be awesome.

[ErinCoughlan]

@Misiu We can add another demo for this. It's going to be the exact same as the select menu one, but with a different template, so you can look at that demo for how to make popovers.

[Misiu]

@ErinCoughlan that would be awesome. I really like popover used in Google maps (3 icons in top right corner). all popovers oven is came place and arrow on top indicates what button was clicked. Maybe that demo You mentioned could look like buttons in Google maps?

[volmerf]

@ErinCoughlan I don't see the demo for the popover made out of a md-panel yet. Is this available somewhere? Would love to see how we could make this. Thanks.

[volmerf]

Thanks for reopening @ThomasBurleson ;) When do you think 1.2.0 will be released?

[ThomasBurleson]

Late Q4 most likely. Expect to see the Popover, however, in master before that release.

[PhilippMeissner]

Is this still a planned feature, @ThomasBurleson ? :)

[bradrich]

@PhilippMeissner Sorry to answer in @ThomasBurleson spot, but yes. I am currently developing this now and plan on keeping this thread updated. Please let me know if you have any questions.

[jansen07]

+1

[iposton]

@stevenh77 popover solution is still the best option here. a nice job using tether and drop.js with angular all bundled into a simple directive. the only change I needed to do was to add a z-index to the drop class because the popover was hiding behind my side-nav. I am excited to see what angular-material will produce for this feature.

[Tooa]

@bradrich when will this be merged into the master branch?

[bradrich]

@Tooa We are reviewing it now. Depending on that review, I will be able to give a release number that this will be in.

[b3hrooz]

Any updates on this? How's the review going? Hope for getting released sometime soon?

[jlacroix12]

Any word on when this may make it into release?

[stephengardner]

Hey guys, hows this coming? Excited to try it out for some help blurbs on our site.

[jlacroix12]

Anything going on with this?

[parmarsanjay]

+1. Is this happening?

[EladBezalel]

We decided we're not going to implement it as part of the framework since our primary efforts are on angular/material2, this can be easily done with our Panel api.

[sdesmond]

If this can "easily be done" can we please just get an example of it??? Maybe in the Panel demo page or something?

[EladBezalel]

I suggest looking at @bradrich pr for it #10308

[aaroncalderon]

@EladBezalel Thanks for your suggestion and pointing us on the right direction.

However, #10308 does not seem to be so easily done, since it requires modifications to the core panel and tooltip components, as well as additional sass and html template files.

So, merging this PR to our local copy will mean we would have to merge every update there after on our own. This will not be the best of scenarios.

[DOrlov77]

Did somebody use https://github.com/Verical/ngDropover ?

[volmerf]

Is there anyone who has a working examle of the md-panel working as a popover? I can't seem to find it anywhere. Would be nice if someone could add it here. Thanks.

[timbrown81]

Here you go @volmerf, demo of using md-panel as a tooltip https://codepen.io/timbrown81/pen/rLVbaE

[Splaktar]

Thank you @timbrown81 for that CodePen. I've updated it to AngularJS Material 1.1.5 and fixed the broken image link. Here's the updated CodePen.

Now that this example with mdPanel is available, are there still concerns with keeping this issue closed and closing the related PR?