Search code examples
angularjsmaterialize

How to add an icon to materialize tooltip?

We have this font awesome icon fa fa-twitter which at the current time sides next to the actual tooltip button of materialize what i need to do is to put it inside the tooltip 

<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>

i know there is a data-customcss implementation aswell so theoritically we could implement it via .css also with url link of a photo icon but i can't figure out how that could be with angular

At the moment the data-customcss="csszzz" doesn't do anything as a pointed css class eg. .csszzz

Solution

  • just add data-html="true" to your anchor element and move icon inside of tooltip:

    <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>

    please look at http://materializecss.com/dialogs.html#tooltip for reference

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