Angular 5 - 将工具提示添加到字符串，可能使用Angular Material 2 mat-tooltip

Question

我想动态地将工具提示添加到某些文本中。理想情况下，我希望使用Angular Material 2附带的内置工具提示，但也可以使用自定义解决方案。

例如，在句子the dog is barking中，我想在dog一词中添加一个显示german shepherd的工具提示。

该文字目前显示如下：<p>{{ stringFromSecureServer }}</p>。

到目前为止，我已尝试使用自定义管道（addTooltip）来查找和替换文本：

transform(value: string): any {
    value = value.replace('dog', '<span matTooltip="german shepherd">dog</span>');
    value = this.sanitizer.bypassSecurityTrustScript(result);
  return value;
}

如果我在页面中注入了<p [innerHTML]="stringFromSecureServer | addTooltip"></p>的文字，文字实际上已修改，但matTooltip（Angular Material 2 component）已转换为mattooltip并赢了＆＃ 39;工作。

假设问题以某种方式与AM2建立联系，我已经尝试使用自定义指令，基于优秀的guide by Netanel Basal。

虽然自定义[tooltip]指令正在使用静态类型的DOM元素（例如<span tooltip="test">test</span>），但当我找到并替换上面显示的文本时，这仍然不起作用。

有没有办法实现我想要做的事情？

PS 据我所知，我不应该有XSS问题，因为我需要处理的所有字符串都不是用户生成的。所有字符串均由服务器通过https连接提供服务（让我们自动更新证书加密）