css 在matToolTip中渲染html内容(Angular)

nmpmafwu  于 2023-10-21  发布在  Angular
关注(0)|答案(3)|浏览(141)

我想在弹出窗口中加粗一些内容。但不是解释而是显示在内容之间
有没有其他的方法,让matToolTip在Angular中提供弹出窗口

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

预期输出

firstname
罗斯

实际输出

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

8cdiaqws1#

我认为原生Angular Material工具提示不允许HTML代码,所以我建议你使用其他工具提示提供程序,有很多工具提示提供程序允许HTML代码,如ng-bootstrap或tippy.js
我个人建议你使用Tippy.js,这里的链接,你可以看到如何使用HTML代码。
https://atomiks.github.io/tippyjs/#html-content
希望对你有帮助。

sr4lhrrt

sr4lhrrt2#

如果你需要简单的定制(改变背景颜色,颜色,字体大小......)为整个工具提示,你可以阅读this post,否则你可以阅读这个答案️
类似的帖子已经存在:Angular 2 Material tooltip with HTML content in angular
你要找的是一个Popover。如前所述,它现在不存在,也不可能有工具提示。
来自**@jelbourn**的回答,Angular成员团队:
在设计工具提示时,我们故意决定不支持这一点。Material Design规范对工具提示中只显示文本有相当严格的规定。丰富的内容也对a11 y提出了挑战。
来源:https://github.com/angular/components/issues/5440#issuecomment-313740211
您可以找到popover here的功能请求。
在材料团队正式发布之前,您可以使用替代方案。以下是一些示例:

taor4pac

taor4pac3#

这不支持一个很好的理由,安全。如果你只想添加"<br />",你可以使用“\n”和css add:

<p matTooltip="Yes! \n Zorro indeed was here">Zorro was here...</p>

.mdc-tooltip_surface {
    white-space: pre-line;
}

相关问题