CSS Tooltips: How to Create Tooltips with CSS (Only)

Last updated May 9th, 2024 at 02:58 pm

"CSS is just so big!" exclaims DevTips guy, Travis Neilson, in Part 5 of his CSS Basics YouTube series. He exclaims this several times. And I agree with him.

(You might want to check out the DevTips YouTube channel. Travis is an absolute hoot, and he knows his stuff.>

Piggybacking off of Travis’ “peeka-boo” demonstration, I’m going to demonstrate how to create tooltips with CSS, using little more than some carefully structured HTML and a couple of special CSS selectors: the :hover pseudo class and the adjacent sibling combinator. That’s right: no JavaScript!

The Scenario and Demo for CSS Tooltips

Suppose that the content of your Web page includes several statements that merit a little bit of elaboration but not enough elaboration to warrant a new, dedicated Web page. This is where tooltips can come in handy. Go ahead and move your mouse over the words or phrases that look like this in the demo below.

How this CSS Tooltips Technique Works

Each paragraph in the above demo consists of regular old text and two spans. The first span is for the trigger — the word or phrase which, when hovered over, will cause the associated explanatory tooltip to appear. I’ve given it a class of "explain". The second span — with a class of "tooltip" — appears somewhere after the first span. The default display property of "explain" is none. What’s critical is that there cannot be any other tag between the "explain" span and its associated "tooltip" span. If there were such an intervening tag, then the span with a class of "tooltip" would no longer be the adjacent sibling of the span with a class of "explain".

When you hover over an "explain" span, its adjacent sibling will appear if it has a class of "tooltip".

Here’s the HTML of the third demo paragraph above:

<p>
Here is the statement that merits a little bit of elaboration. 
Yada yada, blah blah, lorem ipsum. 
And <span class="explain">here's the phrase</span> 
that will trigger the tool tip 
when it is hovered over.
<span class="tooltip">
This is the tooltip elaborating on &quot;here's the phrase&quot;.
</span>
</p>

And here’s the relevant CSS:

p {
	position: relative;
}
.tooltip {
	/* initial state */
	display: none;
}

.explain {
	border-bottom: 1px dotted red;
	display: inline;
	color: red;
}
.explain:hover {
	/* Why not? */
	cursor: help;
}
.explain:hover + .tooltip {
	/* Here's the meat */
	background-color: yellow;
	color: #000;
	display: block;
	padding: 12px 18px;
	position: absolute;
	border: 2px solid red;
	box-shadow: 3px 3px 6px 2px #333;
	max-width: 400px;
	z-index: 1000;
	border-radius: 9px;
	font-size: .9em;
	line-height: 1.5em;
}

Multiple CSS Tooltips in a Single Paragraph

You could even have multipe sets of explain and tooltip spans. See this example:

Here is the HTML for the above paragraph. I added spacing to make it a little easier to see the three sets of spans.

<p>
All you need is a little bit of 

<span class="explain">
	CSS
</span>.
<span class="tooltip">
	Cascading Style Sheets
</span> 

You can use a 

<span class="explain">
	pseudo-class
</span>
<span class="tooltip">
	namely, the <tt>:hover</tt> class
</span> 

and a 

<span class="explain">
	special selector
</span>
<span class="tooltip">
	namely, the <tt>adjacent sibling</tt> element
</span>.
</p>

Disclaimer:

I have not tested this on multiple platforms or browsers. If you don’t see tooltips in the above demos, please let me know in the comments below, including details like information about your computing environment.