I’ve added some features to my pure CSS tooltips.

View Demo View Project

For the most part, this update is just the addition of two new features: an “always display” tooltip and different sizes: tiny, small, large, and jumbo.

Tooltips are defined via the data attributes, so adding support for a new one is easy enough. For sizes, I really wanted to do something dynamic, but that’s not possible. I wanted to do this:

[data-tippy][data-tippy-size] {
  font-size: attr(data-tippy-size);

This, in turn, would allow you to do this:

<button data-tippy="Click to submit" data-tippy-size="2rem">Submit</button>

Or this:

<button data-tippy="Click to submit" data-tippy-size="125%">Submit</button>

And automagically (that is too a word), the element’s tooltip would adjust its size to whatever you defined in the data-tippy-size attribute.

Unfortunately, use of the attr() function is currently limited to use within the content property, most commonly used in pseudo-elements. (Fun fact, that’s how Tippy works, too!) As a result, I’ve contented myself with adding support for specific keywords to define custom sizes.

There are currently no plans for any browser to support using attr() in the way I’d like, so I don’t expect to be able to add dynamic support for anything other than text content anytime soon.