feat(tooltip): add support for rich tooltips

[QuentinFchx]

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!

[fxck]

Shouldn't be hard, it's basically the same thing as menu, when it comes to positioning and usage of the overlay service, the only difference is that instead of menu items it would have content and buttons. But as you said, it's not part of the spec, so you'd be better off doing it yourself.

I've already mentioned it in some issue, but I think this repo could maintain a curated list of user created components utilising m2's helper services and themes, that meet the quality requirements and standards of this repo.

When I think about it, it would be nice to have a "custom-material2-component-starter" repo, which would include a single component and have everything set up(the way to hook into the themes, services tests etc) along with a guide of requirements, to be considered high quality and worthy of inclusion in the above mentioned list.

Thoughts @jelbourn @DevVersion ?

[devversion]

@fxck So you are saying that we should have for each component a single starter repository?

[fxck]

Nope, what I meant is that you could create a "starter" repository that one could clone and create custom material2 component(like popover) with, with everything set up.

Basically this repository slimmed down with different .md files and one example component and material2 as dependency(also addressing the fact that the utility functions would be imported from @angular/material rather than from ../core/rtl/dir for example).

[jelbourn]

We don't have any plans to add / accept a feature like this before 2.0.0 final, though it's something we may explore in the future.

[joejordanbrown]

@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

Google+ style popover

DEMO

Have a play using the StackBlitz template.

[joejordanbrown]

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.

[honzajde]

@joejordanbrown thanks for the nice lib, but thinking about this again - I believe I can do some of the things with dialog and css (maybe I am just naive;) but can not change animations (well, to my knowledge and effort;) - are animations customizable on you popup? Thank you

[joejordanbrown]

@honzajde thanks. You could, but it's constrained and would not be a popover. A popover is meant to position itself to the target element, and it is also activated via other events than just click, you also have focus trapping that can be disabled if required. The example here shows a few use cases, and I will be pushing an updated demo soon with more advanced examples, like using with form inputs on focus and blur etc.

Currently, it doesn't allow for custom animations, that's more of an Angular problem. I'm sure this will be resolved in the future though. What type of animation was it that you required?

[honzajde]

as for the animation - just a simple one but defined by me or my organization, but as long as it looks very 'materially' (and it does) and the speed is ok, I will not need to change it. I hope this popup will make it in some form among standard angular material components. Thx

[fxck]

@jelbourn @mmalerba is anyone actually working on this? Given the intern project tag.

Menu, select, datepicker, autocomplete all could be reusing the same base.

I think menu is closest to the popover component, the problem I see with it is that a lot of logic is actually in the trigger, which only supports click.

[jelbourn]

Menu, select, datepicker, and autocomplete already share the same base (overlay w/ connected position strategy).

Adding a tooltip-like popup/bubble is on our backlog but isn't scheduled.

[willshowell]

FWIW we've also opened up the popover component we're using internally. It's only depends on the CDK and has a very flexible api.

https://github.com/ncstate-sat/popover

https://stackblitz.com/edit/sat-popover-examples

Hopefully this will help carry some people over until an official Material release.

[elvisbegovic]

any news here

[kamok]

Does anyone have a suggestion for a component, ng material 2 vanilla or custom made, that allows you to set menu position to mouse? For example, I got a really fat table that I want to generate a menu of on click of a row.

Additionally, none of the components I'm looking at have an api that allows for pixel perfect setting in relation to the component that you birth the menu from. If there was, I can just save the mouse position and open the menu at that exact location.

[naivefun]

@willshowell will your popover component be added to official M2 modules?

[dhniels]

Really good thread, I would also throw in my hat for a popover component. PrimeNG has one called OverlayPanel we use very often. Any timeline on when we might see this component in Angular Material?

[priyanshsinghal562]

This is my simple solution where i emulate a PopOver with Material Design Menu (no extra dependencies ,no cdk, just angular/material). I used this solution in a project for a customer of mine.

https://stackblitz.com/edit/angular2-material-popover

[Misiu]

@jelbourn any near future plans about Popover? I've just check Google Maps and it looks like this kind of control is used there (with that little triangle on top):

While waiting for official implementation I've found this component. Hope this help others.

[mprinc]

We don't have any plans to add / accept a feature like this before 2.0.0 final, though it's something we may explore in the future.

Well now the version is a way beyond 2.0.0 :) if I remember that it is to catch-up with angular versioning (?) but, still, any more concrete plans on that?

[skobak]

I tried a different solution (this, a wrapper for tippy.js etc), but finally came up with a simple CSS solution with delay hover event, maybe would be helpful for somebody

HTML:

<div [ngClass]="{'needHover':true}> some text
                <span class='tooltip'>Tooltip custom html </span>
</div>

SCSS:

         span {
            position: absolute;
            transition: 0s;
            opacity: 0;
          }
          &:hover > span {
            opacity: 1;
            transition-delay: 0.5s;
            background: white;
            padding: 20px;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
            width: 300px;
            min-height: 200px;
            color: black;
          }```

[meakhilpr]

how to set popover to stay open.

[mduft]

I ended up doing something like this:

HTML:

                <ng-template #infoPopup>
                  <mat-card class='info-card'>
                    <div class='mat-title'>{{param.name}}</div>
                    <mat-card-content>
                      <div><b>Description: </b>{{param.longDescription}}</div>
                    </mat-card-content>
                  </mat-card>
                </ng-template>
                <button mat-icon-button type='button' #infoButton (click)='openInfoOverlay(param, infoButton, infoPopup)'>
                  <mat-icon class='info-icon'>info</mat-icon>
                </button>

and then use CDK overlay to display the template:

  private overlayRef: OverlayRef;

  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}

  ngOnDestroy() {
    this.closeInfoOverlay();
  }

  openInfoOverlay(param: ParameterDescriptor, relative: MatButton, template: TemplateRef<any>) {
    this.closeInfoOverlay();

    this.overlayRef = this.overlay.create({
      positionStrategy: this.overlay.position().flexibleConnectedTo(relative._elementRef).withPositions([{
        overlayX: 'end',
        overlayY: 'bottom',
        originX: 'center',
        originY: 'top'
      }]).withPush().withViewportMargin(30).withDefaultOffsetX(37).withDefaultOffsetY(-10),
      scrollStrategy: this.overlay.scrollStrategies.close(),
      hasBackdrop: true,
      backdropClass: 'info-backdrop'
    });
    this.overlayRef.backdropClick().subscribe(() => this.closeInfoOverlay());

    const portal = new TemplatePortal(template, this.viewContainerRef);
    this.overlayRef.attach(portal);
  }

  closeInfoOverlay() {
    if (this.overlayRef) {
      this.overlayRef.detach();
      this.overlayRef.dispose();
      this.overlayRef = null;
    }
  }

and last but not least some CSS to get an arrow on the popup and make the backdrop for the popover invisible:

.info-backdrop {
  opacity: 0;
}

.info-card {
  max-width: 300px;
}

.info-card::after {
  content: "";
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px ;
  transform: rotate(45deg);
  top: calc(100% - 10px);
  right: 25px;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #FFF #FFF transparent;
}

[maxisam]

just wrap menu into a popover. simple but works in 90% of cases. https://stackblitz.com/github/maxisam/ngx-mat-popover

[w0nderw0man]

do we have news? This functional lack is really heartbreaking. I made mine without any other external librairies. (and I made an exemple with popover content can be a custom-component)

<mat-icon [matMenuTriggerFor]="menu">{{matIconSelection}}</mat-icon> <mat-menu #menu="matMenu"> <div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()"> <ng-content></ng-content> </div> </mat-menu>

a little bit of css, in your css component file : mat-icon { cursor: pointer; }

.mat-menu-item { height: inherit; width: inherit; cursor: default; }

Just add in your popover component the input : @Input() matIconSelection: string;

And the example of use : <home-made-popover [matIconSelection]="'info'"> <div> <div>test</div> <custom-component></custom-component> </div> </home-made-popover>

Result :

Hope it can help

[Splaktar]

Does https://material.angular.io/cdk/overlay/overview meet the needs here?

If not, what is missing? more documentation? a component that simplifies that API and adds Material Design styles?

[LanderBeeuwsaert]

@Splaktar Hi, a component like you say would be nice. For the moment we use "@ncstate/sat-popover": "4.0.0"

[michaelfaith]

Does https://material.angular.io/cdk/overlay/overview meet the needs here?

If not, what is missing? more documentation? a component that simplifies that API and adds Material Design styles?

I think that sums it up. Simplified API and more material-esque styling and transition animations. From an api perspective, something similar to the mat-dialog api might be appropriate, allowing the ability to pass components in, and subscribe to closure and action events.

[imkalyan]

How to change position of popover? And also how to make the popup fixed instead of movement while scrolling?

[fosteman]

Why do we have this Popover for React but not for Angular ? https://material-ui.com/components/popover

[fxck]

@fosteman let me take a really wild guess, but could it perhaps be because angular/components and mui-org/material-ui are completely different packages managed by completely different people and have absolutely nothing to do with each other, other than being based on material design spec by google?