Question

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

工具提示包含有关元素的一些解释。

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

如何显示和隐藏工具提示主动？（通过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;
}

html主动打开工具提示（按代码）

1 个答案: