删除HTML元素的工具提示延迟 [英] Remove tooltip delay for HTML element

问题描述

@Mukyuu有用地标记了一个重复的问题，但它已经很老了，2019年的正确答案可能大不相同。例如，@ Andy Hoffman提出了几年前不可行的解决方法。

这个问题相似，但不相同。

我们的网页包含多个工具提示。在第一个工具提示出现之前（在Chrome上），明显有1-2秒的延迟。在第一个出现后，当您将鼠标悬停在其他元素上时，随后的工具提示几乎会立即出现。

Our web page contains multiple tooltips. There's a noticeable 1-2 second lag before the first tooltip appears (on Chrome). After this first one appears, subsequent tooltips appear nearly instantly as you hover over other elements.

要清楚，工具提示是指中的值标题元素的标题像这样：

To be clear, tooltip refers to the value in the title attribute of an element like this:

<input type="button" title="Click" value="My Button">

有没有一种方法可以使所有工具提示立即显示？

Is there a way to make all tooltips appear instantly?

推荐答案

您可以使用元素的伪内容以在悬停时显示工具提示。请注意，伪内容不适用于输入，但是可以用于按钮，因为在下面的示例中。

You can use an element's pseudo content to display a tooltip on hover. Note, pseudo content does not work with inputs but does work with button, as in the following example.

.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>

更新

作为输入的解决方法，包括包装器 div ，并使用该 div 而不是子 input 。

As a workaround for input, include a wrapper div, and use the data attribute of that div instead of the child 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>

这篇关于删除HTML元素的工具提示延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！