Feature: consider restyling arrow

[Misiu]

Currently arrow is just a flat triangle, that doesn't look good on white background:

I've added arrow in away that Bootstrap 4 does that (using ::before and ::after selectors):

Here is my prove of concept: https://stackblitz.com/edit/mde-popover-kg8eqr?file=styles.scss

I've just looked at how Google did they popup, they are using two triangles and offset them by one pixel. This way they get the border effect. Maybe this could be used instead of pseudo selectors.

[joejordanbrown]

@Misiu

Thanks for the feature request.

I had thought of doing this in the first place but I decided not to include that because the popover actually doesn't add any styling related to borders or box shadows.

When I redesign this I was thinking of removing the colour option and to just provide examples of CSS to customise the arrow. The best option would be to provide SASS with variables to change to auto generate the styles for that config. This could then be wrapped with a CSS class and easily have different styles for different popovers.

What do you think of that approach?

[Misiu]

@joejordanbrown sorry for late response.
For me the approach with SASS and variables would work fine. This would remove a lot of code from typescript file. Please consider adding example how to have multiple tooltipson same page but with different look.

[leblancmeneses]

I tried using the styles in the attached image. They look good but the cdk is adjusting the popover even when using mdePopoverPositionY="above" . Just another edge case for this ticket.

    <h3>Gross profit per transaction?
      <button mat-icon-button color="accent" #profitInfoReasonTarget="mdePopoverTrigger"
          [mdePopoverTriggerFor]="profitInfoReason"
          [mdePopoverOverlapTrigger]="false"
          [mdePopoverOffsetX]="3">
        <mat-icon>info_outline</mat-icon>
      </button>
    </h3>
    <mat-slider [max]="profitLimits.max" [min]="profitLimits.min" [(ngModel)]="profit"
      (focus)="profitInfoReasonTarget.openPopover()"
      (blur)="profitInfoReasonTarget.closePopover()"
      (change)="onSlideChange()"
      [thumb-label]="true">
    </mat-slider>

<mde-popover #profitInfoReason="mdePopover" mdePopoverPositionY="above">
  <mat-card style="max-width: 300px">
    <mat-card-content>
      <p>test</p>
    </mat-card-content>
  </mat-card>
</mde-popover>

[hide-pms]

how set Arrow placement left right?