Stop using Javascript tooltips. Seriously. Stop.

CSS allows us to do almost everything capable with Javascript tooltips, and doesn’t require us to load external libraries, make additional HTTP requests or pollute the DOM.

I created SCSS Tooltips, a simple Sass mixin, to make this task even easier. You can download a zip file or check out the code on github.

Download “SCSS Tooltips”

Are they really as good as Javascript tooltips?

I think they put up a good fight. In order to truly declare CSS tooltips a viable replacement for their Javascript counterparts, here are the requirements that I wanted to meet:

  • Configurable position
  • Smooth fading
  • No extra HTML elements
  • Overridable by including the mixin on another selector

 

See the Pen SCSS Tooltips by David Tintner (@dmtintner) on CodePen.

 

How does it work?

There are  a few interesting things going on inside of the mixin that I’ll dive into a little deeper.

Automatically setting the text color

The text color for the tooltips is automatically configured to be light or dark based on the background color parameter that we pass into the mixin. Using a Sass color function,  I check for the the lightness of the color, and if it is more than 50% we want to contrast the dark background with light text and vice versa. You can configure what color you want for the light and dark text in the settings variables.

Handling variable size of the content

If the tooltips were limited to be a single line of text, I could have just used a fixed amount to position them relative to the parent element. However, I wanted to make sure that the content could be any size and any number of lines.

So to position them dynamically, I used transform: translateY(100%) to move the tooltip body up or down equal to its entire height.

Making them overridable

If you look into the code, you’ll notice a couple of extra, seemingly unnecessary CSS properties. On each direction variation, all 4 positions, top, bottom, left, and right are declared, however 2 of them are set to auto. This is to ensure that if a tooltip was created, but then overridden in a later selector (as I often find myself doing to prevent it from going off the screen) it will still work fluidly.

What’s missing?

The most glaring limitation to SCSS Tooltips is the inability to add HTML inside of them. For that, unfortunately, I think you will have to resort back to Javascript. But this brings up the argument of what kind of content belongs  inside a tooltip. Although not always the case, tooltips are usually for descriptive, supplementary information. If you find yourself needing multiple HTML elements, you might need to reconsider the UI.

What else is out there

There are some other nice Sass tooltip projects already out there:

About David Tintner

David is the developer half of Hacking UI. He was previously a co-founder of the startup Tapdog, which was acquired in 2013. He then worked as a senior front-end developer and team leader at SimilarWeb for two and a half years, until he and Sagi decided to quit their jobs and work on Hacking UI full time. When he's not cranking out lines of CSS or testing out new JavaScript frameworks, David enjoys reading, traveling and music festivals. He is currently living in Tel Aviv, Israel, and considers himself fluent in Henglish.