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.


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

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.

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.

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.

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.

General Syntax

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


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

Materialize CSS Tooltips
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4