Comment 5 for bug 1825069

A message from Amy Drayer on the lib4a11y email list:

I recommend using aria-label, although I'm hesitant to say so without seeing the specific instances in context. I rarely recommend using the title attribute though.

Anything can be made a "tooltip", so that's less problematic. aria-label is treated more consistently than title. I've recently borrowed from Scott Vinkle (https://svinkle.me/) his elegantly written "aria-label tooltip on hover" feature.

Summarized, the HTML would be:
<a href="https:/web.site" class="tooltip" aria-label="WebSite">
 [icon]
</a>

And the CSS (styling can be easily modified):
.tooltip {
  position: relative;
}

.tooltip::before {
  background-color: black;
  border-radius: 0.188rem;
  color: white;
  content: attr(aria-label);
  font-size: 0.8rem;
  opacity: 0;
  padding: 0.5rem;
  position: absolute;
  text-align: center;
  transition: all 0.25s ease;
}

.tooltip:hover::before {
  opacity: 1;
  transform: translateY(-110%);
}