1.介绍
Material Design Lite（MDL）工具提示组件是title属性生成的标准HTML工具提示的增强版本。 工具提示由文本和/或图像组成，当用户悬停在或在基于触摸的用户界面中触摸元素时，可以清楚地传达有关元素的附加信息。 MDL工具提示组件是预先设计的（颜色，字体和其他设置包含在material.min.css中），以提供生动有吸引力的视觉元素，显示相关但通常不重要的内容，例如定义，澄清， 或简短的指示。
2.配置选项
| 类名 | 效果 | 其他 |
|---|---|---|
mdl-tooltip |
定义容器为MDL组件 | 必需 |
mdl-tooltip--large |
大字体提示样式 | 可选 |
mdl-tooltip--left |
将工具提示放置在目标的左侧 | 可选 |
mdl-tooltip--right |
将工具提示放置在目标的右侧 | 可选 |
mdl-tooltip--top |
将工具提示放置在目标的上方 | 可选 |
mdl-tooltip--bottom |
将工具提示放置在目标的下方 | 可选 |
3.应用举例
3.1.简单提示
<!-- Simple Tooltip --> <div id="tt1" class="icon material-icons">add</div> <div class="mdl-tooltip" data-mdl-for="tt1"> Follow </div>
3.2.大字体提示
<!-- Large Tooltip --> <div id="tt2" class="icon material-icons">print</div> <div class="mdl-tooltip mdl-tooltip--large" for="tt2"> Print </div>