CODEWITHSUNDEEP
angularmaterial-designangular-material
Maddy
Maddy

Reputation: 2224

Angular2 Material Tooltips - Class is not being added

I have the following component.html:

<tr>
 <td>
   <span matTooltipClass="primary-tooltip" matTooltipPosition="above" matTooltipHideDelay="100000" matTooltip="{{cert.awsCertId}}"><p style="overflow:hidden;text-overflow: ellipsis;max-width:120px">{{cert.awsCertId}}</p></span>
  </td>
</tr>

In my component.scss:

.primary-tooltip {
  min-width: 300px;
  background-color: #FC5558;
}

As per the docs this should add a custom class to the material tooltip but I don't see the styles being applied. Have I got it wrong? Is there any other way that I could apply styles to the tooltip?

Upvotes: 2

Views: 2617

Answers (2)

Pramod Patil
Pramod Patil

Reputation: 2763

You cannot use the class direclty because it renders as a shadow dom. By using host you can the change the css for shadow dom

:host /deep/ .primary-tooltip {
 min-width: 300px;
  background-color: #FC5558;
}

Upvotes: 0

yurzui
yurzui

Reputation: 214007

Either place your style in a common style sheet

Stackblitz Example

or set encapsulation to ViewEncapsulation.None on your component:

@Component({
 selector: '...',
 template: '...',
 encapsulation: ViewEncapsulation.None,
 styles: [`
   .primary-tooltip {
      min-width: 300px;
      background-color: #FC5558;
   }
`]
})
export class Component {}

Stackblitz example

Upvotes: 4

Related Questions