javascript - html 主动打开工具提示(通过代码)

Question

我有 html 页面，其中许多元素都有工具提示。

工具提示包含一些有关元素的说明。

在我的页面中，我有按钮 - '显示解释'。我希望在单击此按钮时主动显示所有工具提示，即使通常工具提示仅在元素鼠标悬停时显示。

如何主动显示和隐藏工具提示？ (通过 javascript/html 代码。可选 - 使用 jquery/knockout)？

Answer 1

您可以使用伪元素(:after)来模仿工具提示。示例:http://jsfiddle.net/tarabyte/3T3KX/

代码:

HTML

<div title="some title" class="tooltip">Text containing tooltip</div>
<div title="some title" class="tooltip">Text containing tooltip</div>
<div title="some title" class="tooltip">Text containing tooltip</div>
<button id="show">Show tips</button>

一些 JS

document.getElementById('show').addEventListener('click', function(){
    document.body.classList.toggle('show')
}, false);

和CSS

.show .tooltip[title]:after { /*pseudo element*/
    display: block;
    position: absolute;
    content: attr(title);
    top: -10px;
    left: 20px;
    border: 1px solid black;
    font-size: 10px;
}