提示框/Tooltip
当鼠标移动到元素上方时,提示框/Tooltip组件可以为界面元素提供额外的信息:
在MDL中,为一个元素添加Tooltip的步骤如下:
<!--1. 为宿主元素定义一个id -->
<button id="test">TEST</button>
<!--2. 声明一个tooltip组件,使用*for*属性绑定到宿主元素上-->
<div class="mdl-tooltip" for="test">这个按钮没什么用;-(</div>
尽管在提示框内可以使用HTML片段,但是Material Design设计语言不建议在 提示框中加入图片等复杂的元素。
配置选项
MDL class | 说明 |
---|---|
mdl-tooltip | 声明元素为MDL提示框组件 |
mdl-tooltip--large | 为MDL提示框组件应用大字体(14px) |
在示例代码中添加一个图标按钮,设置其提示框内容为:"分享到微博"