@Mukyuu 有用地标记了一个重复的问题，但它已经很老了，2019 年的正确答案可能会非常不同。例如，@Andy Hoffman 提出了一种几年前不可行的解决方法。
这个问题 https://stackoverflow.com/questions/13811538/how-to-delay-basic-html-tooltip是相似的，但又不一样。
我们的网页包含多个工具提示。第一个工具提示出现之前有明显的 1-2 秒延迟（在 Chrome 上）。第一个工具提示出现后，当您将鼠标悬停在其他元素上时，后续工具提示几乎会立即出现。
需要明确的是，工具提示指的是title元素的属性如下：
<input type="button" title="Click" value="My Button">
有没有办法让所有的工具提示立即出现？
您可以使用元素的伪content https://developer.mozilla.org/en-US/docs/Web/CSS/content悬停时显示工具提示。请注意，伪内容不适用于inputs but does与...一起工作button，如下例所示。
.my-button {
position: relative;
}
.my-button:hover::after {
position: absolute;
content: attr(data-tooltip);
bottom: -2.5em;
right: -1em;
background-color: #333;
color: white;
padding: .25em .5em;
}
<input type="button" title="Click" value="My Button">
<button class="my-button" data-tooltip="Click">My Button</button>
Update
作为解决方法input，包括一个包装器div，并使用该数据属性div而不是孩子input.
.input-wrapper {
position: relative;
display: inline-block;
}
.input-wrapper:hover::after {
position: absolute;
content: attr(data-tooltip);
bottom: -2.5em;
right: -1em;
background-color: #333;
color: white;
padding: .25em .5em;
font-size: .8em;
}
<div class="input-wrapper" data-tooltip="Click">
<input type="button" value="My Button">
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
