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

Question

<分区>

Answer 1

您可以使用元素的伪 content在悬停时显示工具提示。请注意，伪内容不适用于 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，并使用该 div 的数据属性而不是子 输入。

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