Mattooltip：如何使框适合文本？

Posted 2023-03-06

【中文标题】Mattooltip：如何使框适合文本？

【英文标题】：Mattooltip: How can I make the box fit the text?

【发布时间】：2019-09-22 05:08:36

【问题描述】：

我有想要显示为工具提示的文本。没有样式（只是字体大小定义为 16px）它看起来像这样：

我真正想要的是将文本显示在一行中 - 所以我在 css 中将空白设置为 pre：

::ng-deep .mat-tooltip 
  font-size: 16px;
  white-space: pre;

但是现在文本超出了工具提示的框：

我尝试将宽度设置为更高的 px 值，但没有任何效果。

有没有办法让框适合文本？

[编辑 - 添加了 cmets 中指出的缺失示例]：stackblitz link 示例中的文本不会离开框，而是缩写而不是框适合整个文本，尽管我将宽度设置为 400 像素。

【问题讨论】：

对于它的价值，我会小心使用 ::ng-deep，因为它在 Angular 7 中已被弃用

@Rinktacular 感谢您指出这一点 - 也会解决这个问题，但那是另一天。

【参考方案1】：

只需将最大宽度设置为unset。为此，请按如下方式定义一个全局 CSS 类：

.my-custom-tooltip 
  max-width: unset !important;

然后将类名传递给工具提示：

<button mat-raised-button
        matTooltip="This Infotext is displayed one line if possible. Just a little more text for demo!"
        matTooltipClass="my-custom-tooltip">
  Action
</button>

也如@rinktacular提到的，尽量不要使用ng::deep。

Stackblitz 示例：https://stackblitz.com/edit/angular-qkh4cl

【讨论】：

谢谢“最大宽度：未设置！重要；”成功了。我仍然不明白一件事 - 将样式应用于什么元素？如果我在浏览器中观察到元素，我无法在按钮或其他地方找到最大宽度样式...？

Tooltip、Dialog等组件将插入cdk-overlay-container。它在您的组件层次结构之外。您可以通过检查 html 找到实际的工具提示 DOM 元素。您可以在下图中看到这一点和 my-custom-tooltip CSS 规则：i.imgur.com/GTttzJx.png 如果您有任何其他问题，请告诉我。

啊，好吧 - 当我试图检查它时，悬停在我身上关闭，这就是为什么我看不到它 - 谢谢！如果其他人难以检查悬停，请在此处查看问题：***.com/questions/15370838/…

如果你想查看 DOM 中的实际元素，你可以将 matTooltipHideDelay 设置为一个大数字，例如matTooltipHideDelay="60000"