Tippy.css update

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.