Tooltips with CSS
It doesn’t take much ::after all
When deciding how to implement a tooltip, you have two paths from which to choose: using a library that provides a pre-built tooltip component or creating one yourself.
There is no shortage of libraries that provide tooltip components and popular choices like Material UI and Vuetify make implementation both quick and easy. However they come at a cost as your project must import them which will take time and space. And you may have to overwrite or re-write some part of the CSS to get the exact style you desire.
The other path is to simply implement the tooltip yourself. You will not have to rely on a library or at least you won’t have to import the tooltip portion, reducing your bundle size. You also will have full control and can style the tooltip how you want from the beginning.
This article aims to show how implementing a tooltip does not take much time or effort.
Pseudo-Elements
We will be using pseudo-elements to implement our tooltip which Mozilla defines as
a keyword added to a selector that lets you style a specific part of the selected element(s) [1]
The pseudo-element we can use to implement a tooltip is ::after as it will allow content to be added to an element.
As a side note, the appropriate implementation is to use double colons for pseudo-elements as it distinguishes from pseudo-classes [1]. However, because previous versions of CSS allowed pseudo-elements to be implemented with a single colon, browers will support either syntax.
Setup
While tooltips can be used many places, they can work well to aid buttons so let’s use that as an example.
I am using React but the tooltip is essentially implemented with CSS so the front-end framework does not matter. For the button element, I included a className of custom-button to add basic styling.
The other thing worth mentioning is the div surrounding the button element. The tooltip will pertain to any element(s) contained and in this case, it is a button element. This also means you can reuse the tooltip styling in other files by using the same className. The final note is the tooltip text will be stored in a custom attribute we are creating called tooltipText.
The Tooltip
The GIF below shows what the tooltip will look like when we are done. Notice how the tooltip not only appears to emerge into view but to be sliding down from the button. Instead of the tooltip just appearing next to the button, it will appear like it’s partially coming from the button.
All of the following CSS will target the class named tooltip and the entire process involves only three steps.
Step 1: The Initial Position
The position property will establish where in the document our tooltip element is positioned. Setting this property to relative will position the tooltip element relative to its normal position, which is surrounding the button.
Step 2: The Basic Tooltip Style
Before walking through the properties, notice the ::after pseudo-element that is attached to the tooltip element. This allows us to add and style additional content that will become our tooltip.
I have altered some tooltip properties so it will be visible in this step.
content: This allows us to replace or attach some text to the tooltip element. We will use this to display the text of the tooltip.
top: Since we want the tooltip to start at the bottom of the button and the button’s height is 40px, the tooltip needs to start 40px from the top of the botton.
left: This will position the tooltip’s left edge to 50% of the element. But it doesn’t center the tooltip and for that we can use the transform property.
transform: This will allow us to move the tooltip horizontally to the left by 50% and will center the tooltip in relation to the button. This article talks more about centering objects which may be helpful.
visibility: Setting this to hidden will hide the tooltip element.
opacity: Setting this to zero means the tooltip element is fully transparent. This becomes important during the transition from invisible to visible and gives it the appearance of fading into view.
transition: This allows us to control the transition between two states of the tooltip: invisible and visible. Transitioning the opacity makes the tooltip appear to emerge into view while transitioning the top will make the tooltip appear as if it is sliding down from the button element. This article talks about how the intermediate values are calculated which gives the animation effect.
The final version of step 2 is seen below. Notice that the tooltip is not visible as content’s value is an empty string and both visibility and opacity are un-commented.
Step 3: Final Touches
Since we want the tooltip to appear when the user hovers over the button, let’s add the :hover pseudo-class.
content: Now the content property has a function called attr, which takes an attribute named tooltipText, and displays the attribute’s value in the tooltip. So this means whatever text we give the tooltipText attribute on the div element will show up as text in the tooltip.
visibility: We now want the tooltip to be visible in this state.
opacity: Again, we want the tooltip to be fully visible. The transition property will animate the states between 0 and 1 to make it look like the tooltip is fading into view.
top: We know the top of the tooltip is set at 40px but is hidden. When we hover over the button the top is then set to 50px. The transition property will animate the states between 40px and 50 px so that it looks like the tooltip is sliding down from above.
Conclusion
Implementing a tooltip did not require a library import and getting the style we wanted was quick and involved just a few lines of CSS.
Here is the full code:
A partial goal of this article was to for me to also get better at explaining concepts for which I have a limited understanding. Teaching a concept can be a great way to improve one’s weaknesses. While there are always several alternative ways to implement something, there may be even more efficient methods of creating a tooltip and I would love to hear any comments/recommendations on anything that could be improved.
References:
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
