在 <a> 标记标题属性中允许 html答案

【问题标题】：Allow html in an <a> tag title attribute在 <a> 标记标题属性中允许 html
【发布时间】：2017-08-10 09:13:04
【问题描述】：

我试图找到这个问题的解决方案，到目前为止我已经想出了这个应该允许 HTML 的管道

import { PipeTransform, Pipe } from "@angular/core";

@Pipe({
    name: "toHtml"
})
export class ToHtmlPipe implements PipeTransform {
    transform(content) {
        return `<b>${content}</b>`;
    }
}

我有一个链接，它会在悬停时显示数据工具提示：

<a *ngIf="day.Info.Info" data-toggle="tooltip" [title]="day.Info.Info | toHtml" placement="right"><i style="color:black" class="glyphicon glyphicon-comment"></i></a>

但是，这是我得到的结果：

所以管道不工作，我不能使用[innerHtml]=""，因为它只是更改了指向字符串的链接，而不是图标。

提前感谢您的帮助

【问题讨论】：

元素的标题属性可以包含看起来像 HTML 的内容，即<b>blah</b>，但它不被视为 HTML
native title 属性只维护文本，有自定义提示，你需要实现它或使用一些实现这种东西的插件
@JaromandaX：这完全取决于属性值的用途。是的，浏览器中 title 属性的标准工具提示处理不会将其视为 HTML。但是其他任何东西（比如 Bootstrap）都可以做它想做的事情。
Bootstrap 4 文档说您可以在 title 属性中包含 HTML，正如 Nicolas 试图做的那样。这不是这里的问题。 v4-alpha.getbootstrap.com/components/tooltips/#interactive-demo
@thebluefox 我刚刚注意到您的链接，只需添加data-html="true" <a> 就可以了，我不知道这可以通过引导程序实现！抱歉！

标签： javascript angular pipe tooltip

【解决方案1】：

根据 cmets，查看工具提示的 Bootstrap 文档；

https://v4-alpha.getbootstrap.com/components/tooltips/#interactive-demo

并添加了自定义 HTML：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button>

您需要将data-html="true" 属性放在<a> 元素上。

【讨论】：