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

我有html页面，有很多元素有工具提示

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

在我的页面中，我有一个按钮-“显示说明”。 我想，在点击这个按钮时，主动显示所有工具提示，即使通常工具提示只显示在鼠标上方的元素上

---

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

您可以使用伪元素（

：after

）来模拟工具提示。例如：

代码：

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>

和CSS

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

.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。如何存储工具提示？这仅仅是一个标题属性还是什么花哨的东西？在Hawk的示例中，只需执行$（'.tooltip'）.show（）即可显示工具提示。您需要jquery来使用这种漂亮的语法。@用户，如果它们是“本机”工具提示，那么您可能很难让它们一次全部打开（如果您首先设法让它们打开）。一些工具提示实现只对整个文档甚至整个应用程序使用一个小部件，这取决于您通常不能同时将鼠标悬停在两个非嵌套元素上。这对我不好。工具提示必须悬停，而不像简单的可见/不可见字段。你们对我有什么想法，如何改进鹰派的建议，那个就是工具提示会在点击按钮时出现？他的建议也有问题：你们不能给嵌套元素输入，我也需要那个些输入工具提示。“这对我不好。”这太糟糕了：）。“工具提示必须是悬停的，而不是简单的可见/不可见字段。”这是什么意思？工具提示在悬停时仍然可见。是的，它们在悬停时仍然可见。我的意思是，我需要工具提示像工具提示一样继续显示，即使它是通过单击按钮显示的。（工具提示浮动在图元上，而不是站在图元附近）。我希望你能理解我的问题，并为我没有更好地解释我的问题感到抱歉。好吧，使用CSS和你的想象力让它看起来像一个本地的问题。如果要使用任何自定义解决方案（jquery工具提示或其他什么），仍然需要对其进行样式设置。