当用户将鼠标悬停在复选框上时，如何制作工具提示？ （Material Design Lite）

Question

这就是我现在正在努力的方法。当用户将鼠标悬停在复选框上时，尝试显示工具提示。

 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="Asia">
            <input type="checkbox" id="Asia" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Asia</span>
    </label>
    <div class="mdl-tooltip" for="Asia">
            -China<br>-Hong Kong<br>-Japan<br>-Korea<br>-Philippines<br>-Singapore<br>-Taiwan<br>-Vietnam
    </div>

Answer 1

您可以创建数据属性，例如data-tooltip或您想要调用它的任何内容。将文本添加到属性中。

<input type="checkbox" data-my-tooltip="Hello World">

CSS：

[data-my-tooltip]:before {
    content: attr(data-my-tooltip);
    position: absolute;
    opacity: 0;

}

[data-my-tooltip]:hover:before {
    opacity: 1;
    border-radius: 3px;
    padding: 3px;
    background: black;
    color: white;
    margin: -25px 0 0 0;   /*setting it above. to the left. You can play with this */
}