Last updated May 13th, 2016 at 04:41 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.
What drives many to rebuild their existing Web sites to be responsive and mobile-friendly are justifiable concerns about user experience and search engine placement. After all, the need to make Web pages look and act right on small mobile devices has only intensified as more and more people spend proportionately more of their Internet time on those devices. And then there’s Google, who, on April 21, 2015, started boosting the ranking of mobile-friendly pages on mobile search results. Yet it is a side effect of this rebuild process that may turn out to be the best reason of all to undertake it.Namely, rebuilding a Web site to be responsive and mobile-friendly forces one to focus on the limitations and constraints of small mobile devices, thus making one concentrate on the most important content and functionality.
If you write, edit, or publish blog articles, you probably don’t wake up in the morning hoping your blog articles suck. But let’s face it: so many blog articles DO suck. In this short article, I’ll share my extremely simple and fundamental rule for writing blog articles that don’t suck. (If it weren’t for all the evidence to the contrary, this advice would be so obvious as to be unnecessary.)My rule is this: Write a summary (50 -100 words) of the article first! If you can’t do that, then you might need to go back to the drawing board.
Here is the statement that merits a little bit of elaboration. Yada yada, blah blah, lorem ipsum. And here’s the phrase that will trigger the tool tip when it is hovered over.This is the tooltip elaborating on "here’s the phrase".
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 "here's the phrase". </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:
All you need is a little bit of CSS.Cascading Style Sheets You can use a pseudo-classnamely, the :hover pseudo class and a special selectornamely, the adjacent sibling element.
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.
Leave a Reply