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.
Follow the followings steps to create a Materialize tooltips.
.tooltipped
class to the <a>
or <button>
element class.
<a class="btn tooltipped" href="#">Tooltip</a>
data-position
attribute to <a>
or <button>
element to specify the tooltip direction i.e(bottom|top|left|right) such as data-position="bottom"
.
<a class="btn tooltiped" data-position="bottom" href="#">Tooltip</a>
data-tooltip
to <a>
or <button>
element and provide the tooltip information such as data-tooltip="I am a tooltip"
.
<a class="btn tooltiped" data-position="bottom" data-tooltip="I am a tooltip" href="#">Tooltip</a>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems, options);
});
$(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>
Source Code
<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>
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>
Source Code
<a class="btn tooltiped" data-position="top" data-tooltip="I am a tooltip.">Hover me!</a>
To change the tooltip direction into bottom, Use data-position="bottom"
attribute.
Source Code
<a class="btn tooltiped" data-position="top" data-tooltip="I am a tooltip.">Hover me!</a>
Add data-position="right"
attribute to change the tooltip direction in the right.
Source Code
<a class="btn tooltiped" data-position="right" data-tooltip="Tooltip general description">Hover me!</a>
To change the tooltip direction in the left, use data-position="left"
attribute.
Source Code
<a class="btn tooltiped" data-position="left" data-tooltip="I am a tooltip.">Hover me!</a>