Adding custom styles to matTooltip

I recently came across this requirement and after getting stuck to style the matTooltip I finally managed to do it and thought it’s a good idea to share what I learned, here.

It’s very difficult to look at the structure of the Angular Material Tooltip because of it’s behavior when you try to inspect, so let me share the HTML first.

<div class="cdk-overlay-container">
     <div class="cdk-overlay-connected-position-bounding-box" dir="ltr"style="top: 0px; left: 0px; height: 100%; width: 100%;">
      <div id="cdk-overlay-1" class="cdk-overlay-pane mat-tooltip-panel"style="pointer-events: auto; top: 8px; left: 417.625px;">
      <mat-tooltip-component aria-hidden="true" class="ng-tns-c34-15 ng-star-inserted" style="zoom: 1;">
          <div class="mat-tooltip ng-trigger ng-trigger-                state"style="transform-origin: left center; transform: scale(1);">Info about the action</div>
      </mat-tooltip-component>
     </div>
    </div>
</div>

It’s half the problem solved when you can clearly see the structure of the HTML, next we’ll try to style it. Make sure to put these styles in your custom mixin.scss or styles.scss

.cdk-overlay-pane {  
 &.mat-tooltip-panel {  
  .mat-tooltip { 
  color: pink;
  background-color: white;
  border:  1px solid #eeeeee;
  border-radius:  3px;
  font-size:  15px;
  padding:  10px; 
  } 
 } 
}

That’s it. Now you know how to style a tooltip.

Thanks!