Search within TutorialsPark

MDL : Tooltips


How to use MDL - Material Design Lite to create Tooltips


Material Design Lite (MDL) : Tooltips

Material Design Lite(MDL) component tooltips is used to create a tooltip displaying text when mouse pointer hovers over it, its an enhanced version of HTML title attribute

A Tooltip comprises of a text, image or an icon , additional information can be obtained by hovering the mouse pointer over the element, or touches in touch based UI.

Tables find usage in almost all types of webpages to display structured data, hence the design and placement of tables has a huge impact on user experience.

The MDL tooltip has predefined colors, fonts and other UI details to provide a visually attractive tooltip displaying related content.

The Use of tooltip on a Webpage greatly improves the user experience by providing additional information in limited space and reducing the need to navigate to new page for details.


Material Design Lite(MDL) Tooltip : Simple Tooltip

A Simple MDL Tooltip can be created using class mdl-tooltip as a container to hold tooltip text.

The Icons are added using class icon material-icons

Example: Material Design Lite (MDL) Tooltip : Simple Tooltip

Give it a TRY! » Note: The Data-table cells are formatted as numeric by default.


Material Design Lite(MDL) Tooltips: Large Tooltip

A MDL Tooltip with large font tooltip text is created using mdl-tooltip-large

Example: Material Design Lite (MDL) Tooltip : Large Tooltip

Give it a TRY! » Note: The Size of the Icon Remains same as a simple tooltip.


Material Design Lite(MDL) Tooltip : Rich Tooltip with HTML Elements

Rich MDL Tooltips with HTML Elements can also be created using elements like strong, i etc to format individual text content.

Example: Material Design Lite (MDL) Tooltip : Rich Tooltip with HTML Elements

Give it a TRY! » Note: The Element i formats the text content.


Material Design Lite(MDL) Tooltip : Rich Tooltip with Line Breaks

A Rich MDL Tooltip with HTML line breaks can be created using element br to insert line breaks, thus having long text content with less width occupied.

Example: Material Design Lite (MDL) Tooltip : Rich Tooltip with Line Breaks

Give it a TRY! » Note: Use line breaks only if the text content is long.


Material Design Lite : Tooltip Classes

MDL Class Description
mdl-tooltip To create a MDL tooltip container
mdl-tooltip-large To Create large MDL tooltip Container