How to apply CSS to a mdTooltip inside a md-cell

Question

I want to apply some CSS styling for the mdTooltip attribute in a md-cell of a cdk table.

Something like this:

<ng-container cdkColumnDef="Content">
  <md-header-cell *cdkHeaderCellDef md-sort-header> {{"Content" | translate}} </md-header-cell>
  <md-cell *cdkCellDef="let row" class="content" mdTooltip="{{row['Content'] }}"> {{row['Content'] }} </md-cell>
</ng-container>

And in my css I did something like this

/deep/ .content[mdTooltip] {
     white-space: pre-wrap;
}

But it is not working.

How can I fix this problem?

Appreciate the help.

Have you tried? https://stackoverflow.com/questions/48509341/custom-styling-of-mdtooltip — caiovisk, Feb 01 '19 at 03:19

Alex · Answer 1 · 2019-02-01T04:47:08.257

After searching around, found the solution.

Thanks for Axel's Comment

Add an new attribute mdTooltipClass="foo".

    <ng-container cdkColumnDef="Content">
      <md-header-cell *cdkHeaderCellDef md-sort-header> {{"Content" | translate}} </md-header-cell>
      <md-cell *cdkCellDef="let row" mdTooltip="{{row['Content'] }}" mdTooltipClass="foo"> {{row['Content'] }} </md-cell>
    </ng-container>

CSS side

/deep/ .foo {
   white-space: pre-wrap;

}

The problem fixed.

How to apply CSS to a mdTooltip inside a md-cell

1 Answers1