Remove tooltip delay for HTML element [duplicate]

Question

@Mukyuu helpfully flagged a duplicate question, but it is quite old and the correct answer in 2019 may be very different. For instance, @Andy Hoffman has suggested a workaround that was not viable years ago.

This question is similar, but not the same.

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?

Answer 1

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>

Update

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>