在 matToolTip (Angular) 中渲染 html 内容

Question

我想在弹出窗口中加粗一些内容。但不是被解释而是被显示在内容中

有没有其他方法，让 matToolTip 提供在 Angular 中悬停的弹出窗口

 <button [matTooltip]="help|translate"  type="button"  mat-button class="button-save" [disabled]="!isInfoAvailable">
          <mat-icon>help_outline</mat-icon>
        </button>

预期输出

名字迈克

姓氏罗斯

实际产量

<b>firstname <\b> mike <\n>
<b>lastname <\b> ross

Answer 1

如果您需要对整个工具提示进行简单的自定义（更改背景颜色、颜色、字体大小...），您可以阅读这篇文章，否则您可以阅读这个答案 \xe2\xac\x87\xef\xb8\x8f

\n\n

类似的帖子已经存在：Angular 2 Material tooltip with HTML content in Angular

\n

您正在寻找的是Popover。正如所说，它现在不存在，并且不可能使用工具提示。

\n

来自Angular 成员团队@jelbourn的回答：

\n

\n

在设计工具提示时，我们特意决定不支持\n这一点。Material Design 规范对于工具提示中仅出现的文本有相当多的规定。丰富的内容也给\na11y带来了挑战。

\n

\n

来源：https ://github.com/angular/components/issues/5440#issuecomment-313740211

\n

您可以在此处找到弹出窗口的功能请求。

\n\n

在 Material 团队正式发布之前，您可以使用替代方案。这里有些例子：

\n

\n
• https://github.com/joejordanbrown/popover（文档在这里）
\n
• https://github.com/ncstate-sat/popover
\n
• https://github.com/maxisam/ngx-mat-popover（使用材质菜单）
\n
• https://ng.ant.design/components/popover/en（ng-zorro库）
\n

\n

Answer 2

我认为原生 Angular Material Tooltips 不允许 HTML 代码，所以我建议您使用其他提供程序的 Tooltips，有很多允许 HTML 代码的提供商，例如 ng-bootstrap 或 Tippy.js

我个人建议你使用 Tippy.js，这里是你可以看到如何使用 HTML 代码的链接。

https://atomiks.github.io/tippyjs/#html-content

希望对您有帮助。