免費AI編程助手
Material Design Lite 工具提示
2018-12-19 18:17 更新
該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強適用于擺放各類工具提示。下表中提到的可用類和它們的影響。
| SN | 類名稱和說明 |
|---|---|
| 1 | MDL-提示 標識容器作為MDL工具提示和要求提示容器元素上。 |
| 2 | MDL-提示-大 設(shè)置大字體效果，是可選的;去提示容器元素 |
例
下面的例子展示了使用MDL-提示類的顯示不同類型的工具提示。
mdl_tooltips.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<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>
結(jié)果
驗證結(jié)果。
以上內(nèi)容是否對您有幫助：
更多建議：