menu

Material Design Lite – Tooltips


Material Design Lite – Tooltips : 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 | Tooltip Example

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

Syntax

Material Design Lite – Tooltips

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

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

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

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

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

Try it »

Tooltip Position : Bottom

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

Material Design Lite(MDL): Position Bootm

Try it »

Tooltip Position : Left

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

Material Design Lite(MDL): Position Left

Try it »

Tooltip Position : Right

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

Material Design Lite(MDL): Position RIght

Try it »

Advertisements