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代码，因此我建议您使用其他提供程序作为工具提示，其中很多人都允许ng-bootstrap或tippy.js这样的HTML代码。

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

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

希望它对您有帮助。

Answer 2

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

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

您要寻找的是 Popover 。如前所述，它现在不存在，并且无法使用工具提示。

Angular成员团队 @jelbourn 的答案：

在设计工具提示时，我们故意决定不支持这个。材料设计规范仅对文字有规定出现在工具提示中。丰富的内容也带来了挑战 a11y。

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

您可以找到弹出框here的功能请求。

在从Material团队正式发布之前，您可以使用其他方法。以下是一些示例：

https://github.com/joejordanbrown/popover（文档here）
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover（使用“材料”菜单）
https://ng.ant.design/components/popover/en（ng-zorro lib）

在matToolTip（Angular）中渲染HTML内容

2 个答案: