删除HTML元素的工具提示延迟

Question

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

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

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

为了清楚起见，工具提示指title的是元素的属性中的值，如下所示：

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

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

Answer 1

您可以使用元素的伪内容在悬停时显示工具提示。注意，伪含量不工作input秒，但做的工作有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>

更新

作为 的解决方法input，包括一个包装器div，并使用它的 data 属性div而不是 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>