How to create a tooltip with HTML and CSS

Learn how to create a tooltip in HTML and CSS step by step

1 - First we create the tooltip container

style.csspage.html

2 - Create the tooltip text with position absolute

style.csspage.html

3 - Show the tooltip only on hover

style.csspage.html

4 - Add a nice appear in transition

style.csspage.html

5 - Create a small arrow to show the direction

style.csspage.html

6 - Create the version with tooltip at the bottom

Trick : To position the arrow in the middle of the tooltip text, use either {left: 50%; transform: translateX(-50%)} or {top: 50%; transform: translateY(-50%)}

style.csspage.html

7 - 💪🏼 Now let's add more text inside the tooltip and hover the first tooltip

You can see the tooltip arrow position is wrong. Can you fix it ? (solutions in the next two steps)

style.csspage.html

8 - ✍️ Fix #1: keep the arrow in the tooltip text and move the tooltip text up

style.csspage.html

9 - ✍️ Fix #2: use a fixed position of the tooltip relative to the top of the tooltip text

style.csspage.html

I've got a challenge for you !

Reproduce the left and bottom versions of the tooltip

🎉

If you enjoyed this tutorial, share it to other people !

Every week, I publish a new tutorial / section.
Follow me on twitter to be notified when a new section is out (every week)

Follow @stephane_pop

If you have any question or suggestion, please reach out on twitter also 🤗