As much as I love title it seems like over the years it has gotten a lot of neglect. 24a11y.com/2017/the-trials-and-tri... This article goes into more details about it. I use something like this to make a small, stylable keyboard and mouse user accessible tooltip.

<span data-title=“I’m a tool tip look at me!”>
    There is more than meets the eye ;)
    <span class=“visually-hidden”>I’m a tool tip look at me!</span>
</span>

[data-title]::after {
  content: attr(data-title);
  position: absolute;
  /*
   * add other styles you want
   */
}

/* https://piccalil.li/quick-tip/visually-hide-an-element-with-css/ */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

It’s a little more involved, but now has a wider accessibility support both mouse and keyboard users.

Please excuse me if this is a bit off topic, but I think this is the perfect post to ask for some advice about tooltips.

I love how tooltips allow us to show our users a little help text about UI elements, and I've added tooltips to most of my web app elements. But after using the app for a little while they become a bit annoying.

I think maybe I could keep a track of how many times a tooltip is shown to the user, and disable it after N times. This N value could be small for frequently used elements and a bit higher for elements that are rarely used. This count could be kept in local storage or maybe saved in the server's user profile.

Has anyone already faced and solved this issue? Any advice or best practice on how to handle it? Thanks!

As of December 2020, most mobile browser vendors have still not implemented support for title (presumably because there is no way to “hover” with a touchscreen). For this reason, the title attribute has only very limited use cases, namely for non-essential information that doesn't need to be displayed to users of mobile devices.

Usually, tooltips should be available to mobile users as well as desktop users. If anything, tooltips may be used more frequently on mobile devices, due to limited screen real estate. The interaction for displaying them will be slightly different (usually a touch rather than a hover, both of which usefully trigger a mouseenter event), but they’ll still remain viewable.

If you’re building exclusively for desktop or doing rapid prototyping, you might want to use title for simplicity. Otherwise, it’s almost never the correct choice.

I've recently started using tooltips (from the Vue Element library) over title attributes since the tooltip appears instantly and the title tip takes a few milliseconds to show. It's a very small difference but I think it makes a much better user experience.

About those Internet points... May the quote be from Hans Gruber in Die Hard? :)