在 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

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

我个人建议您使用 Tippy.js，这是您可以查看如何在其上使用 HTML 代码的链接。

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

希望对你有帮助。

Answer 2

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

---

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

您正在寻找的是Popover 。 如前所述，它现在不存在，工具提示也不可能。

Angular 成员团队@jelbourn 的回答：

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

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

您可以在此处找到 popover 的功能请求。

---

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

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