Materialize CSS tooltips are used to show textual hints about the specific element. Materialize CSS provides the easiest wave of creating tooltips.
Follow the followings steps to create a tooltip.
.tooltipped
class to the <a>
or <button>
element base class.data-position
attribute to <a>
or <button>
element to specify the tooltip direction i.e( bottom | top | left | right) such as data-position="bottom"
.
data-tooltip
to <a>
or <button>
element and provide the tooltip information such as data-tooltip="I am a tooltip"
. To place tooltip in the left direction, use data-position="left"
attribute.
Use data-position="bottom"
attribute to place the tooltip direction into the bottom.
Use the data-position="right"
attribute to place the tooltip in the right direction.