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

Material Design Lite – Tooltips

<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).

Material Design Lite – Tooltips

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

Try it »

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

Material Design Lite – Tooltips


More Examples

Let us have some more examples and demo.


Add Tooltip on Icon

You can add tooltip on icon hover simply as below –

Material Design Lite(MDL): Tooltip on Icon

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

Try it »

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

Material Design Lite – Tooltips

Large Tooltip

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

Material Design Lite(MDL): Large Tooltip

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

Try it »

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.

Material Design Lite(MDL): Add image to 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>

Try it »

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

Add image in tooltip example

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.

Material Design Lite(MDL): Position Top

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

Try it »

Tooltip Position : Bottom

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

Material Design Lite(MDL): Position Bootm

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

Try it »

Tooltip Position : Left

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

Material Design Lite(MDL): Position Left

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

Try it »

Tooltip Position : Right

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

Material Design Lite(MDL): Position RIght

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

Try it »


Advertisements

Add Comment