”;
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of tooltips. The following table lists down the available classes and their effects.
Sr.No. | Class Name & Description |
---|---|
1 |
mdl-tooltip Identifies container as an MDL tooltip and is required on tooltip container element. |
2 |
mdl-tooltip–large Sets large-font effect and is optional; goes on tooltip container element. |
Example
The following example will help you understand the use of the mdl-tooltip classes to show the different types of tooltips.
mdl_tooltips.htm
<html> <head> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <script langauage = "javascript"> function showMessage(value) { document.getElementById("message").innerHTML = value; } </script> </head> <body> <table> <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr> <tr> <td> <div id = "tooltip1" class = "icon material-icons">add</div> <div class = "mdl-tooltip" for = "tooltip1">Follow</div> </td> <td> <div id = "tooltip2" class = "icon material-icons">print</div> <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div> </td> </tr> <tr> <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr> <tr> <td> <div id = "tooltip3" class = "icon material-icons">cloud_upload </div> <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div> </td> <td> <div id = "tooltip4" class = "icon material-icons">share</div> <div class = "mdl-tooltip" for = "tooltip4"> Share your content<br>using social media</div> </td> </tr> </table> </body> </html>
Result
Verify the result.
Advertisements
”;