Tooltips are used all over the web, typically to give the user more information about what a button might do, or to let them know what kind of info should be entered as an input. This is nice because it allows for a minimalist UI that provides details only when they become necessary.
Libraries like Bootstrap can be used to help speed up tooltip development, but the convenience of this solution is offset by it’s cost. Bootstrap’s Javascript library itself only weighs a modest 36.3KB (3.3.7 minified), but the bigger problem is that it requires jQuery which has a size of 84.7KB minified. Bringing in Bootstrap and jQuery for the single purpose of tooltips isn’t overly responsible as the 121KB download might actually be noticeable for users on slow connections.
Writing you own Javascript to do this task isn’t overly complex – one idea might be to to setup a mouseenter / mouseleave event on the component of interest which apply class or style attributes to show the tooltip at the right times. I think that is a better solution, but the purpose of this post is to show how to achieve this with CSS only. Checkout the codepen demo below.
1
This solution actually works pretty similarly to the Accordion example that I showed in my last post. The tooltip is nested inside each item such that it’s sibling, the button, comes before it. This layout allows us to leverage the sibling selector to trigger the tooltip and change its opacity to 1 when the button is hovered on. Setting a transition on this attribute gives a nice fade in effect.
Although the tooltip actually sits within the .item element, we want to separate it such that it appears to be outside – this is achieved by applying position: relative to the .item and then applying position: absolute to the tooltip itself and positioning it into the correct place. In this example I take advantage of calc() to combine percentage and em based units. Basically what I am doing is putting it right below the button, and then moving it down an additional 2em past that. I’m a big fan of the using calc(), and it’s nice to know that it has really good support at this point.
It definitely isn’t necessary, and actually doesn’t have a lot to do with using CSS as a substitute for Javascript, but I took the chance to attach a little arrow to the top of my tooltip. This might make the context of the tooltip’s directions a bit more obvious to the user.
Since the arrow should sit on the top and middle of the tooltip, position: absolute is once again the clearest solution, but this is a bit awkward because the tooltip itself is already set as absolutely positioned and we want the arrow to be positioned relative to that. To overcome this I nested another div called .tooltip-inner within .tooltip and set that as relative. If I wanted to, I could have nested yet another div and set that as absolute, but I used a pseudo element instead. The :after selector is kinda built to append text to the end of an element, but this can be worked around by setting the content to an empty string and specifying the display style as block.
The last piece of the puzzle is turning the block we have positioned from a square to a triangle. So, how do you make triangles in CSS? One way is with borders … check out the demo below.
1
The key to this trick is the way that borders fit together – you can see that they will ‘chamfer’ such that they join on a 45 degree angle for a square. Looking at the third box, you can imagine that if all the sides of the border are transparent except one a triangle (an isosceles triangle) will appear. Likewise, you can set two sides as transparent to create right triangles.
Downsides and Summary
Unlike in the last post covering Accordions, I don’t see many downsides of this CSS only approach compared to the Javascript event driven approach. It’s a nice and simple way to build your own custom tooltips that is easy to implement with a bit of knowledge and a couple tricks.