Material Design Lite - Chú giải công cụ

MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi khác nhau được xác định trước và hiển thị các loại chú giải công cụ khác nhau. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.

Sr.No. Tên & Mô tả Lớp học
1

mdl-tooltip

Xác định vùng chứa dưới dạng chú giải công cụ MDL và được yêu cầu trên phần tử vùng chứa chú giải công cụ.

2

mdl-tooltip--large

Đặt hiệu ứng phông chữ lớn và là tùy chọn; đi vào phần tử vùng chứa chú giải công cụ.

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-tooltip các lớp để hiển thị các loại chú giải công cụ khác nhau.

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>

Kết quả

Xác minh kết quả.