Material Design Lite – Tooltips

Material Design Lite – Tooltips (MDL) : Tooltips are used to provide useful information when user hovers on some text, link, button icon etc. Tooltip is an important component of any framework. Material design lite tooltip is basically enhanced version of the basic html title attribute. Here in this tutorial we are going to explain how you can create tooltip in material design lite(MDL). You can also use our online demo run and see the output.

How to create Material Design Lite – Tooltips | MDL | Tooltip Example

Let us learn to create material design lite tootips using the examples and demo.

Syntax

<a href="#" id="myELement">My Text</a>
<span for="myELement" class="mdl-tooltip">This is simple text... </span>

Add an element for which you want to create tooltip and then add an id selector. Now add a span and add “for” attribute. This “for” attribute will have the same value as the element’s id selector. Add class mdl-tootltip and now add some text for the tooltip which will be displayed when user will hover the element.

Example

Let us create a simple example of the tooltip in material design lite(MDL).

<a href="#" id="settings">Setting</a>
<span for="settings" class="mdl-tooltip">All in One Settings for your App. </span>

If you run the above example it will produce output something like this –

Add Tooltip on Icon

You can add tooltip on icon hover simply as below –

<div id="share" class="icon material-icons">share</div>
<span for="share" class="mdl-tooltip">Share Content Online. </span>

If you run the above example it will produce output something like this –

Large Tooltip

The class mdl-tooltip–large is used to create large tooltips.

<button  id="large-demo" >Hover Me</button>
<span for="large-demo" class="mdl-tooltip mdl-tooltip--large">This is large font demo. </span>

Add Image | Icon to Tooltip

Images can also be added in material design lite(MDL). Here we have created an example to add the image to the tooltip.

<a href="#"  id="large-demo" >Tooltip With Image</a>
<span for="large-demo" class="mdl-tooltip">
<img src="//tutorialsplane.com/wp-content/uploads/2016/08/watermelon-1590125_960_720.png" alt="" width="100" height="100" class="alignnone size-full wp-image-8295" />
This is image demo. </span>

If you run the above example it will produce output something like this –

Tooltip Position : Top

If you want to specify the position of tooltip you can use predefined classes(mdl-tooltip–top for top) to add the position.

<a href="#"  id="large-demo" >Top</a>
<span for="large-demo" class="mdl-tooltip mdl-tooltip--top">
This is position top Demo. </span>

Tooltip Position : Bottom

The Class mdl-tooltip–bottom is used to add the bottom position.

<a href="#"  id="large-demo" >Bottom</a>
<span for="large-demo" class="mdl-tooltip mdl-tooltip--bottom">
This is position Bottom Demo. </span>

Tooltip Position : Left

The Class mdl-tooltip–left is used to add the bottom position.

<a href="#"  id="large-demo" >Left</a>
<span for="large-demo" class="mdl-tooltip mdl-tooltip--left">
This is position left Demo. </span>

Tooltip Position : Right

The Class mdl-tooltip–right is used to add the bottom position.

<a href="#"  id="large-demo" >Right</a>
<span for="large-demo" class="mdl-tooltip mdl-tooltip--right">
This is position right Demo. </span>

Add Comment