如何添加图标以实现工具提示？

Question

我们有这个字体真棒图标 fa fa-twitter，它在当前时间旁边的实际工具提示按钮旁边我需要做的是将它放在工具提示中

<div class="center">
  <i class="fa fa-twitter"></i>
  <a class="btn tooltipped" data-position="bottom" data-delay="50" data-customcss="csszzz"  data-tooltip="I am tooltip" >Hover me!</a>
    </div>

我知道还有一个 data-customcss 实现，所以理论上我们可以通过 .css 实现它，也可以使用照片图标的 url 链接，但我不知道如何使用 angular

目前 data-customcss="csszzz" 并没有做任何事情作为一个有针对性的 css 类，例如。.csszzz

Answer 1

只需添加data-html="true"到您的锚元素并在工具提示内移动图标：

<div class="center">
  <a class="btn tooltipped" 
      data-position="bottom" 
      data-delay="50" 
      data-html="true"  
      data-tooltip="<i class='fa fa-twitter'></i> I am tooltip" >Hover me!</a>
</div>

请查看http://materializecss.com/dialogs.html#tooltip以供参考

plunker：https ://plnkr.co/edit/3cZtphZ984R1ZqnkuLBX ? p = preview