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.
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:
How about mobile support? My iPhone can’t use them, but it probably would with the onTouch event – idk
but nice, I guess in a few years or so, we can finally use CSS for tooltips and such, but currently, we sadly have to use Javascript to get the full effect.
@Lasse… how are javascript tooltips better for phone? Don’t they generally do the same thing (display on hover)?
Tooltips for phone are displayed on click.
How about http://kushagragour.in/lab/hint/ ?
I have using them anywhere I need them
I would love to use CSS tooltips. But you can’t use them within a container with “overflow: hidden”, as also the tooltip will be hidden outside its container.
The only flaw I see – missing delay before showing tooltip. You don’t want stuff appearing randomly when you browse the page. Javascript allows you to be more “clever” and show tooltips/popovers when you stop with your mouse over the button/link/whatever
If you are using sass you should be using a compiler or a tool for compilation, if you want to use JavaScript with an external library, we can use the same tool (grunt plus uglify) to concatenate all the files and do just one http request for the js file, and another one for css compiled from sass files.
CSS is for presentation and JavaScript for interactivity (not a unbreakable rule)
JavaScript isn’t bad, and at this day browsers are optimized to use it a lot, so even with an old computer using JavaScript with some event listeners attached to a few DOM elements won’t hurt your website performance.