CODEWITHSUNDEEP
cssangularjsangular-material
joeCarpenter
joeCarpenter

Reputation: 1535

Styling md-tooltip (Angular Material 1.1.3)

I have a mat-tooltip that I was styling through a CSS like this:

mat-tooltip .mat-content {
    // custom values, styling is not applied
}

However since 1.1.2 release of angular material this styling is not being applied to my tooltips. Has anybody encountered a similar issue?

Upvotes: 6

Views: 17137

Answers (1)

The.Bear
The.Bear

Reputation: 5855

If you want to style all your tooltips, just override .md-tooltip class:
(JsFiddle)

.md-tooltip {
    height: 35px !important;
    background-color: red !important;
    color: white !important;
    border-radius: 5px;
}

If you want particularly style some tooltips, use a custom class over md-tooltip element:
(jsFiddle)

HTML

<md-tooltip class="custom-tooltip">
    I'm a custom tooltip
</md-tooltip>

CSS

.custom-tooltip {
  top: 25px !important;
  height: 35px !important;
  background-color: red !important;
  color: white !important;
  border-radius: 5px;
}

Upvotes: 16

Related Questions