Material Design Lite 工具提示
2018-12-19 18:17 更新
该MDL提供多种CSS类各种预先定义的外观和行为增强适用于摆放各类工具提示。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-提示 标识容器作为MDL工具提示和要求提示容器元素上。 |
| 2 | MDL-提示-大 设置大字体效果，是可选的;去提示容器元素 |
例
下面的例子展示了使用MDL-提示类的显示不同类型的工具提示。
mdl_tooltips.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" 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>
结果
验证结果。
以上内容是否对您有帮助：
更多建议：