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

时间:2017-03-29 18:00:15

标签: angularjs materialize

我们有这个字体真棒图标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链接实现它,但我无法弄清楚角度是怎么回事

目前data-customcss =“csszzz”没有做任何指向css类的事情,例如。 .csszzz

1 个答案:

答案 0 :(得分:3)

只需将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