So first of all, what's a tooltip? When you hover over some HTML element, and a boring white box pops up anchored at the mouse a few seconds later, congrats! You just found a tooltip.
Part of the overall problem with the default tooltip is that it generally doesn't look anything like a site, thus it doesn't match the site's colour scheme, and some can find it difficult to read. Traditionally, we've resorted to jQuery plugins and Javascript functionality to make a standard tooltip become possible to style, and this just isn't very great. Not only is that more scripting going on in the background, which can slow your site down for some users, depending on how the tooltip function works, it can also make that element no longer sensible to screen-readers. In this guide, we'll go over the very easy way CSS3 in conjunction with WAI-ARIA lets us now combat this, and still make pretty things for our site.
First off, CSS3 now lets us use attributes as CSS content. The content property allows us to input specific data within a CSS selector. It's how the infamous Font Awesome works; by defining itself as a font, and then inserting the codes for these font wingdings into :after selectors, it very easily renders a wingding glyph onto the page where it should be, despite that element often being empty.
.hover_tooltip { position: relative; } .hover_tooltip:after { content: attr(title); position: absolute; }
With the above, we can take the content of the title attribute of our .hover_tooltip element, and place it in the :after selector, and then free it from its container so it popping up doesn't screw up the page display. But there's a problem. The title attribute is still there, so the default tooltip hover still appears.
.hover_tooltip { position: relative; } .hover_tooltip:after { content: attr(data-title); position: absolute; }
In this instance, we've changed our attribute to the data-title attribute. HTML attributes beginning with data- are ignored by screen-readers (as semantically they mean nothing to them), and most of everything else. They're kind of little rainy-day jars that you can store information in that doesn't affect anything, isn't visible, and isn't read by screen-readers, it just needs to exist for some reason.
Accessibility Concerns
Do screen-readers read CSS-generated content? The answer seems to be mostly, "yes," as long as one isn't using Firefox, or IE11.
Considering that role-play isn't a very large corner of the world, most likely skipping some accessibility re: screen readers won't really impact what vision impaired users you do happen to get. Chances are, they're not using IE11 anymore, and Firefox is so notoriously fussy with screen-reader technology, I doubt anyone with a reader uses it. However, if you're concerned about it, you could use the aria-label attribute instead of data-title.
The aria-label attribute of HTML elements sets a text string for assistive technology, like screen-readers, to read from. Other users don't see it, but screen readers will read elements more descriptively; well, provided that aria-label is set to something more descriptive! (Don't worry, I'm writing an accessibility guide that will cover this in more detail.)
Because browsers ignore the data- (or aria- for those that don't use readers) items, the default tooltip no longer appears, and our .hover_tooltip object still gets its content. We have a fully CSS-based tooltip style handler!
From here, you can add whatever styling you like! Arrows can be added by using the :before selector, if you'd prefer to do so, but note that you cannot position tooltips relative to cursor position on the screen with just CSS; you'll need Javascript for that, which would sort of plunder the pure CSS angle. However, these can be styled in a variety of ways, you can even make different styles for different kinds of tooltip you want to show, add images and other such at will. Get creative! c:
