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