DEV Community

Discussion on: How HTML gives us tooltips for free!

View post
Collapse
 
gingerchew profile image
ginger •

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>
Enter fullscreen mode Exit fullscreen mode 
[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;
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
jordanfinners profile image
Jordan Finneran •

A bit more involved, but still browser native! It's an interesting solution!
Thank you for the comment