English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Tooltips
  • 时间：2024-09-17

Material Design Lite - Tooltips

Previous Page Next Page  

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 psts 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>
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <pnk 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>
               <span id = "tooltip1" class = "icon material-icons">add</span>
               <span class = "mdl-tooltip" for = "tooltip1">Follow</span>
            </td>
            
            <td>
               <span id = "tooltip2" class = "icon material-icons">print</span>
               <span class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</span>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multipne Tooltip</td></tr>
         <tr>
            <td>
               <span id = "tooltip3" class = "icon material-icons">cloud_upload </span>
               <span class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></span>
            </td>
            
            <td>
               <span id = "tooltip4" class = "icon material-icons">share</span>
               <span class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</span>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

Result

Verify the result.