Material Design Lite Tooltip
what is Tooltips in (MDL) ?
- Material Design Lite(MDL) component tooltips are used to create a tooltip displaying text when mouse pointer hovers over it, it’s 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
Sample Code for Simple Tooltip
<!-- A Simple Tooltip 1 -->
<div id="mytooltip" class="icon material-icons">event</div>
<div class="mdl-tooltip" for="mytooltip">
Choose Date
</div>
<hr><br>
<!-- A Simple Tooltip 2 -->
<div id="mytooltip2" class="icon material-icons">build</div>
<div class="mdl-tooltip" for="mytooltip2">
Custom Settings
</div>
- 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
Sample Code for Large Tooltips
<!-- Large Tooltip 1 -->
<div id="mytooltip" class="icon material-icons">refresh</div>
<div class="mdl-tooltip mdl-tooltip--large" for="mytooltip">
<!-- class "mdl-tooltip--large" -->
Refresh
</div>
<br><hr><br>
<!-- Large Tooltip 2 -->
<div id="mytooltip2" class="icon material-icons">favorite</div>
<div class="mdl-tooltip mdl-tooltip--large" for="mytooltip2">
<!-- class "mdl-tooltip--large" -->
Like
</div>
- 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.
Sample Code for Rich Tooltips with Html
<div class="demo-tooltip">
<!-- MDL Rich tooltip 1 -->
<div id="tt3" class="icon material-icons">https</div>
<div class="mdl-tooltip" for="tt3">
Use <i>https</i> Protocol
</div>
<br><hr><br>
<!-- MDL Rich Tooltip 2 -->
<div id="tt4" class="icon material-icons">code</div>
<div class="mdl-tooltip" for="tt4">
Write Code using
<i>HTML5</i>
</div>
</div>
- 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.
Sample Code for Rich Tooltips with line breaks
<div class="demo-tooltip">
<!-- MDL Rich tooltip 1 -->
<div id="tt3" class="icon material-icons">android</div>
<div class="mdl-tooltip" for="tt3">
Download Latest Version<br>
Android 8.1
</div>
<br><hr><br>
<!-- MDL Rich Tooltip 2 -->
<div id="tt4" class="icon material-icons">book</div>
<div class="mdl-tooltip" for="tt4">
Buy Book via <br>
<b>Amazon.com</b>
</div>
</div>
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 |