Materialize Tooltip

Materialize tooltip is used to show textual hints about the specific element. Materialize CSS provides the easiest way to control the tooltip position such as left, right, top, bottom.

Example

Hover me!

Follow the followings steps to create tooltip.

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.

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

Tooltip initilization:jQuery
       
$(document).ready(function(){
    $('.tooltipped').tooltip();
  });

General Syntax

<a class="btn tooltiped" data-position="bottom|top|left|right" data-tooltip="Tooltip general description">Hover me!</a>

Try It Now

Source Code

Download

<div class="row">
  <div class="col s12">
    <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
  </div>
</div>

Try it yourself

Source Code : Output

Hover me!

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.

General Syntax

<a class="btn tooltiped" data-position="top" data-tooltip="Tooltip general description">Hover me!</a>

Try It Now

Source Code

Download

<a class="btn tooltiped" data-position="top" data-tooltip="I am a tooltip.">Hover me!</a>

Try it yourself

Source Code : Output

Hover me!

Materialize Tooltip

Example

Tooltip Class

Tooltip Position

Tooltip Content

Tooltip initilization: Javascript

Tooltip initilization:jQuery

General Syntax

Source Code

Source Code : Output

Tooltip Position:Top

General Syntax

Source Code

Source Code : Output

Web Tutorials