造型md-tooltip(Angular Material 1.1.3)

joe*_*ter 6 css angularjs angular-material

我有一个mat-tooltip,我通过这样的CSS设计样式:

mat-tooltip .mat-content {
    // custom values, styling is not applied
}
Run Code Online (Sandbox Code Playgroud)

但是,自1.1.2角度材料发布以来,这种样式并未应用于我的工具提示.有没有人遇到过类似的问题?

The*_*ear 13

如果要设置所有工具提示的样式,只需覆盖.md-tooltip类:
(JsFiddle)

.md-tooltip {
    height: 35px !important;
    background-color: red !important;
    color: white !important;
    border-radius: 5px;
}
Run Code Online (Sandbox Code Playgroud)


如果你想特别设计一些工具提示,请在md-tooltip元素上使用自定义类:
(jsFiddle)

HTML

<md-tooltip class="custom-tooltip">
    I'm a custom tooltip
</md-tooltip>
Run Code Online (Sandbox Code Playgroud)

CSS

.custom-tooltip {
  top: 25px !important;
  height: 35px !important;
  background-color: red !important;
  color: white !important;
  border-radius: 5px;
}
Run Code Online (Sandbox Code Playgroud)

  • 我读了这篇[post](http://stackoverflow.com/questions/33293599/how-to-add-line-breaks-within-tooltip-in-angular-material-design),因为Angular Material 1.1.1类名暂时以下划线开头......`md-tooltip ._md-content {height:auto; }`.也许也可能是这样. (2认同)