Materialize CSS Tooltips

Materialize Tooltip is a small, interactive, textual hint for graphical elements such as icons, buttons, etc. It gives a clear and concise hint about its function so that a new user can understand the function of the graphical element in a short time.
The position of the Materialize CSS tooltips specify the direction of the tooltip. It can be set on the left, right, top, or bottom sides of the graphical element. The direction of tooltip depends upon the data-position attribute. Its values will be left, right, bottom, and top.
The data-tooltip attribute, is responsible for holding the Materialize CSS tooltip content.

Example

Tooltip Demo

Materialize Tooltip Class

tooltipped -Add this class to the elements for which you want to create tooltips. Here, it uses with the button or hyperlink element.

Steps To Create A Materialize Tooltip

To create a tooltip in Materialize CSS, follow the given below steps.

Add .tooltipped class to the <a> or <button> element base 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 another 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 initialization: jQuery
          
$(document).ready(function(){
    $('.tooltipped').tooltip();
  });

General Syntax

      <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>

Try it now

Tooltip Position : Left

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

Example

Tooltip Position Left Demo

General Syntax

      <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="I am tooltip">Position Left</a>

Try it now

Tooltip Position : Bottom

Use data-position="bottom" attribute to place the tooltip direction into the bottom.

Example

Tooltip Position Bottom Demo

General Syntax

      <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Position Bottom</a>

Try it now

Tooltip Position : Right

Use the data-position="right" attribute to place the tooltip in the right direction.

Example

Tooltip Position Right Demo

General Syntax

      <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="I am tooltip">Position Right</a>

Try it now

Tooltip Position : Top

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

Example

Tooltip Position Top Demo

General Syntax

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

Try it now

Conclusion

Meterialize CSS tooltips are textual hints that give functional information about the graphical elements, such as buttons, links, etc. It is small in size but looks so interactive. The tooltip position can be set in the left, right, top, or bottom directions. To create a tooltip, simply use .tooltipped class with positions such as top, bottom, left, or right.

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4