Materialize CSS Tooltips

Materialize CSS tooltips are used to show textual hints about the specific element. Materialize CSS provides the easiest wave of creating tooltips.

Steps To Create Tooltip

Follow the followings steps to create a tooltip.

>> Add .tooltipped class to the <a> or <button> element base class.
>> 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".
>> Add another attribute data-tooltip to <a> or <button> element and provide the tooltip information such as data-tooltip="I am a tooltip".
>> At the end, initialize it either using Javascript or jQuery.

<script type="text/javascript">
document.addEventListener(
'DOMContentLoaded',function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems, options);});
// Or with jQuery
$(document).ready(
function(){
$('.tooltipped').tooltip();
});
</script>

General Syntax

Try it now

Tooltip Position : Left

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

General Syntax

Try it now

Tooltip Position : Bottom

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

General Syntax

Try it now

Tooltip Position : Right

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

General Syntax

Try it now

Materialize CSS Tooltips

Steps To Create Tooltip

General Syntax

Tooltip Position : Left

General Syntax

Tooltip Position : Bottom

General Syntax

Tooltip Position : Right

General Syntax

Our Tutorials