Tooltips in HTML and CSS

14th November, 2013

Reading Time 3 minutes

7 Comments

View Demo

The HTML
All you need for the HTML is an anchor tag (or any tag you like) with a child element. The child will be hidden by
default when the page loads and only shown when the parent is hovered over.

1<a class="tooltip" href="#">

Tooltip
2 <span class="txt">Curabitur tempor adipiscing tellus a placerat? Suspendisse at accumsan
3urna.</span>
4</a>

The CSS
Parent Element

First you need to give the parent a relative value. That way the child element wont sit at the top of screen but will
instead stay relative to the parent, which in this case is the anchor link.

1.tooltip {
2 position:relative;
3 }

Child (Tooltip) Element

The code for the actual tooltip is a little more extensive.

Width: You need to give it a set width otherwise it can get a little hairy when the length of the text changes
from tooltip to tooltip.
Padding: is required to make it more readable, otherwise it may blend too much to the current background.
Display: is set to none so you cant see it on the initial page load.
Position: Its absolutely positioned so it can be inside the parent without affecting any siblings or even the
parent itself. The reason we dont use actual positioning like top:0px; or left:0px; is so we can be more
flexible when it comes to having the tooltip at the top, right, bottom or left.
Z-index: is set high so it stays above everything else. Anything with z-index automatically sits above
everything else however Ive set it high so it can be above other elements that also have a z-index.
Other: The other values are just basic styling to make it look nice. Also I like to put /* Type */ in my CSS
files to declare font styles, (in Sass I write it as // Type so it doesnt get rendered).

1 .tooltip .txt {
2 width:200px;
3 padding:10px 15px;
4 display:none;
5 position:absolute;
z-index:1000;
6 border-radius:3px;
7 background:rgba(0,0,0,0.75);
8 /* Type */
9 font-size:12px;
text-shadow:-1px 1px 0px rgba(0,0,0,0.2);
10 line-height:150%;
11 color:#fff;
12}
13
14

Adding the Arrow

Well start off with having a base for our arrow that we can then position with more specific values, depending on
whether its a top, right, bottom or left tooltip.

1.tooltip .txt:before {
2 width:0px;
3 padding:0px;
4 position:absolute;
5 content:'';
}
6

Top, Right, Bottom and Left

You will realise that the code above doesnt actually position the tooltip or show the arrow, thats because its easier
(and more maintainable) to have a separate class you can add to the end of .tooltip to set the position and show the
arrow accordingly.

1 /* Top */
2 .tooltip.top .txt {
bottom:20px;
3
left:-10px;
4 }
5
6 .tooltip.top .txt:before {
7 bottom:-5px;
8 left:10px;
border-left:5px solid transparent;
9 border-right:5px solid transparent;
10 border-top:5px solid rgba(0,0,0,0.75);
11}
12
13/* Right */
14.tooltip.right .txt {
top:-10px;
15 left:20px;
16}
17
18.tooltip.right .txt:before {
19 top:10px;
left:-5px;
20 border-top:5px solid transparent;
21 border-bottom:5px solid transparent;
22 border-right:5px solid rgba(0,0,0,0.75);
23}
24
25/* Bottom */
26.tooltip.bottom .txt {
top:20px;
27 left:-10px;
28}
29
30.tooltip.bottom .txt:before {
31 top:-5px;
left:10px;
32 border-left:5px solid transparent;
33 border-right:5px solid transparent;
34 border-bottom:5px solid rgba(0,0,0,0.75);
35 }
36
37/* Left */
.tooltip.left .txt {
38 top:-10px;
39 right:20px;
40}
41
42.tooltip.left .txt:before {
top:10px;
43 right:-5px;
44 border-top:5px solid transparent;
45 border-bottom:5px solid transparent;
46 border-left:5px solid rgba(0,0,0,0.75);
47 }
48
49
50
51
52
53
54
55

Now when we need specific placement we just use the html class like so and thats where itll show up.

1<a class="tooltip top" href="#">

Tooltip
2 <span class="txt">Curabitur tempor adipiscing tellus a placerat? Suspendisse at accumsan
3urna.</span>
4</a>

Why No Default Placement?

The reason is simple, to keep the code modular, reusable and maintainable. Something Im deeply passionate about.
Although one thing to keep in mind about modular, reusable and maintainable code is that its up to you to decide
what counts as maintainable. Im sure Harry Roberts of CSS Wizardry would find my code base and your quite funny
if we were to class it as maintainable, however we might find his overkill.

I respect Harry a lot, hes actually the reason I code in a maintainable fashion. However one thing I always try to do it
what works for me BUT I also make sure the code is to a set standard of maintainability.
For example, I could hand my code base over to someone else who codes in a completely different way, it may still be
maintainable and modular but different all the same. That person can still use my code and edit and experiment with it
without hassle.

Thanks for reading this short tutorial on creating tooltips in HTML and CSS. If youd like more content like this, go
ahead and check out the tutorials section!