当用户将鼠标悬停在复选框上时，如何制作工具提示?(材料设计精简版)

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

您可以创建数据属性，例如数据工具提示或任何您喜欢的称呼。将文本添加到属性中。

<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 */
}