样式化 md-tooltip (Angular Material 1.1.3)

Posted 2023-03-06

【中文标题】样式化 md-tooltip (Angular Material 1.1.3)

【英文标题】：Styling md-tooltip (Angular Material 1.1.3)

【发布时间】：2017-07-02 04:37:00

【问题描述】：

我有一个垫子工具提示，我通过这样的 CSS 设置样式：

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

但是，自从 1.1.2 版本发布 angular material 后，这种样式就没有应用到我的工具提示中了。有没有人遇到过类似的问题？

【参考方案1】：

如果您想为所有工具提示设置样式，只需覆盖 .md-tooltip 类：(JsFiddle)

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

---

如果您想要

特别是一些工具提示的样式

，请在 md-tooltip 元素上使用自定义类： (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;

【讨论】：

我在post 中读到，从 Angular Material 1.1.1 开始，类名暂时以下划线开头...md-tooltip ._md-content height: auto; 。也许也可以。

Oooohh :) 无论如何您的回答都有效，谢谢 The.Bear！

@The.Bear 是否可以将 md-tooltip css 应用于我页面中的一个工具提示？

您必须将自定义类添加到 md-tooltip 元素中。例如：<md-tooltip class="custom-tooltip"></md-tooltip>。 JSFIDDLE