How to change css of the hover text in mat-icon angular?-CodePudding

I am using a mat-icon like this

HTML CODE file - datentry.component.html

<mat-icon 
      matTooltip="Time limit exceeded for current sku" 
      matTooltipPosition="above" 
      matTooltipClass="delay-msg-tooltip">
      info
</mat-icon>

I want to change the background color and font color for the hover text "Time limit exceeded for current SKU", I have tried like this without any success.

CSS CODE file dataentry-component.scss

.delay-msg-tooltip {
  background-color: #FFFFFF!important;
  color: #5F5F5F!important;
  box-shadow: 0px 4px 23px #0000000d!important;
  border-radius: 5px;
}

For reference in the browser, the mat-icon HTML shows up like this

<mat-icon _ngcontent-nph-c79="" role="img" mattooltip="Time limit exceeded for current sku" mattooltipposition="above" mattooltip  aria-hidden="true" data-mat-icon-type="font" aria-describedby="cdk-describedby-message-0" cdk-describedby-host=""> info </mat-icon>

Images for reference curr view

desired view

CodePudding user response：

Where have you written the CSS for .delay-msg-tooltip?

Because of Angular View Encapsulation you'll need to write the styling in your styles.scss and not the component's style

CodePudding user response：

According to the Material Icon Documentation

@Component({
  selector: 'tooltip-custom-class-example',
  templateUrl: 'tooltip-custom-class-example.html',
  styleUrls: ['tooltip-custom-class-example.css'],
  // Need to remove view encapsulation so that the custom tooltip style defined in
  // `tooltip-custom-class-example.css` will not be scoped to this component's view.
  encapsulation: ViewEncapsulation.None,
})

You'll either have to set ViewEncapsulation to None so that the styling you applied in your component is applied to the matToolTip as the ToolTip is not technically inside your component. Or

You can add the styles in the styles.css so that they are applied globally.

I recommend doing the latter. As it saves me from changing the view encapsulation of the component and keep the styles encapsulated of that component