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.

[leefernandes]

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: #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.

[b-ashtiani]

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?