Materialize Tooltip

Follow the followings steps to create a Materialize tooltips.

• Add the .tooltipped class to the <a> or <button> element class.

  Tooltip Class

   
     <a class="btn tooltipped" href="#">Tooltip</a> 
     

• Add data-position attribute to <a> or <button> element to specify the tooltip direction i.e(bottom|top|left|right) such as data-position="bottom".

  Tooltip Position

   
     <a class="btn tooltiped" data-position="bottom" href="#">Tooltip</a> 
     

• Add other attribute data-tooltip to <a> or <button> element and provide the tooltip information such as data-tooltip="I am a tooltip".

  Tooltip Content

   
     <a class="btn tooltiped" data-position="bottom" data-tooltip="I am a tooltip" href="#">Tooltip</a>
     

• At the end initialize it either using javascript or jquery.

  
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems, options);
  }); 
   

    
$(document).ready(function(){
    $('.tooltipped').tooltip();
  }); 
   

Materialize Tooltip Position:Top

To place the tooltip at the top, simply add data-position="top" attribute to the button i.e <button> or hyperlink i.e <a> element.

Tooltip Position: Bottom

To change the tooltip direction into bottom, Use data-position="bottom" attribute.

Tooltip Position: Right

Add data-position="right" attribute to change the tooltip direction in the right.

Tooltip Position:Left

To change the tooltip direction in the left, use data-position="left" attribute.