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 tooltip.
.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();
});
<a class="btn tooltiped" data-position="bottom|top|left|right" data-tooltip="Tooltip general description">Hover me!</a>
<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.
<a class="btn tooltiped" data-position="top" data-tooltip="Tooltip general description">Hover me!</a>
<a class="btn tooltiped" data-position="top" data-tooltip="I am a tooltip.">Hover me!</a>