Material Design Lite 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

提示框/Tooltip

当鼠标移动到元素上方时,提示框/Tooltip组件可以为界面元素提供额外的信息:

mdl-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)
在示例代码中添加一个图标按钮,设置其提示框内容为:"分享到微博"