Materyal Tasarımı Lite - Araç İpuçları

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı araç ipuçlarını görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listeler.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-tooltip

Konteyneri bir MDL araç ipucu olarak tanımlar ve araç ipucu konteyner öğesinde gereklidir.

2

mdl-tooltip--large

Büyük yazı tipi efektini ayarlar ve isteğe bağlıdır; araç ipucu kapsayıcı öğesine gider.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-tooltip farklı araç ipuçlarını göstermek için sınıflar.

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>

Sonuç

Sonucu doğrulayın.