• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, July 27, 2015

How to Create Tooltips with CSS (Only)

Last updated May 13th, 2016 at 04:41 pm

devtips-css-tooltips"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 &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:

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.

Related Posts

  1. How to use Advanced Custom Fields with Genesis
  2. Which Categories and Tags Should I Use?
  3. CSS Descendant Selectors
  4. Underlining for Emphasis: How to un-underline text on a Web page with CSS
  5. How to Create an Effective Value Proposition
  • Choose the best match.

Written by Jeff Cohan · Categorized: Snippets · Tagged: CSS

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×