How to Add a Tooltip in HTML/CSS (No JavaScript Needed)

How to Insert a Contextual Information Bubble into a Web Page


How to Add a Tooltip in HTML/CSS (No JavaScript Needed)

by Christopher Heng, thesitewizard.com

Sometimes, or so we're told, it's useful to be able to add a tooltip to your web page, so that when a visitor hovers his/her mouse over a particular element, say, some technical term, a little text box or bubble will appear giving a brief explanation of what that term means. Some people like to use tooltips for interactive features on their site, where it furnishes an explanation of what a particular option means, in the hopes that they make the interface less incomprehensible.

This article, in response to a question asked by a visitor, discusses 2 ways of adding a tooltip in HTML and CSS. The methods described here do not need JavaScript, so your web page will work even if your visitor has disabled it.

Some Technical Knowledge Needed

You will need some knowledge of HTML and CSS to adapt the things mentioned in this tutorial. While you don't have to be an expert, this article requires that, at the very least, you know how to insert HTML and CSS code into a web page. You will need to know a bit more than that if you are using the second of two methods given below, particularly if you want to customize the appearance of the tooltip box.

The Problem with Tooltips

In general, it's not a good idea to use tooltips for information that you think your users will need to know. Some webmasters, particularly those who are strongly concerned about accessibility (that is, making their websites accessible to the blind, the handicapped, etc), contend that it is never a good idea to rely on tooltips.

Here are some of the issues with tooltips:

  1. Tooltips do not appear on mobile phones and other touch devices. Remember, these little information bubbles only appear when a mouse hovers over them. Devices like mobile phones and tablets that rely on touch do not typically have mice attached.

  2. Tooltips present an accessibility challenge. People who rely on screen readers (eg, the blind) or who can only use the keyboard to navigate (eg, the blind and those with some sort of muscle impairment) will most likely never get to know what your tooltip contains. In fact, they probably won't even know there was a tooltip in the first place.

  3. Even among those who can see, not everyone knows that they can get more information by hovering their mice over a piece of text or picture (or whatever). It's not obvious to a person reading a page that they should scan for tooltips, even if that person is an experienced computer user. For example, did you see the tooltip for the "HTML and CSS" link in the second paragraph of this article (at the top of the page)?

The argument is that if you think your users need more information about something, it's generally best to put it in plain sight by default. For example, the Free Mobile-Friendly Layout Wizard does this by placing the explanation for each option in Step 2 directly below it, as indeed do all the other wizards.

The caveats above notwithstanding, the rest of the article descibes 2 (of probably many) ways of displaying tooltips. But bear in mind the fundamental problems about tooltips given here. Use them only for optional information which your users can function without.

The HTML Method

The easiest and most compatible way of popping up one of those contextual information tips is to use the method provided by the HTML standards, the title attribute.

The tooltip for the "HTML and CSS" link mentioned earlier uses this method.

<a href="https://www.thesitewizard.com/html-tutorial/what-is-html.shtml" title="What is HTML? What is CSS?">HTML and CSS</a>

If you want to see a demo of this code, just scroll up the page to the second paragraph of this article, and hover your mouse over the link there.

The standards specify that title is a global attribute, which means that you can add it to any HTML element, just like you can an id or a class. That is, although I used it on a link in my example, you can add it to anything, even a paragraph or an entire column enclosed in a DIV block.

Incidentally, the HTML standards do not require that browsers present the content of the title attribute as a tooltip bubble. That said, all the desktop/laptop browsers that I have come across so far have done it this way. Screen readers (used by the blind), however, generally ignore the title attribute, and people relying on such software will not even know that a tooltip is available.

A CSS Method with content and ::after

Another way is to use CSS to display the tooltip. This method gives you more flexibility in what the tooltip bubble looks like, and even allows you to use images if you wish. It is, however, even less accessible than the title method, if such a thing were possible. (That is, people who need screen readers and other accessibility tools will probably have no hope at all of knowing that your tooltip exists, let alone finding out what it says.)

Here's the HTML for the same tooltip given earlier, but implemented using the content property and the ::after pseudo-element.

<a href="https://www.thesitewizard.com/html-tutorial/what-is-html.shtml" id="tooltipdemo">HTML and CSS</a>

The CSS to make the tooltip is as follows:

a#tooltipdemo {
  position: relative ;
}
a#tooltipdemo:hover::after {
  content: "What is HTML? What is CSS?" ;
  position: absolute ;
  top: 1.1em ;
  left: 1em ;
  min-width: 200px ;
  border: 1px #808080 solid ;
  padding: 8px ;
  color: black ;
  background-color: #cfc ;
  z-index: 1 ;
}

Demo: The following link uses the above code: HTML and CSS. Move your mouse over it to see it in action.

This method of displaying a tooltip uses many features (eg, the content property, the ::after pseudo-element, the use of position for ::after, etc) that rely on your users having a modern browser. If they use an older browser, the tooltip will not be displayed correctly, if at all.

You can also use other things besides text in your tooltip. For example, the following demo displays an image when the mouse cursor is over the link.

Demo: powered by thesitewizard.com. (Move your mouse over the preceding 3 words to see the picture.)

The HTML for the image tooltip is as follows:

<span id="imagedemo">powered by thesitewizard.com</span>

And the CSS is:

span#imagedemo {
  position: relative ;
  text-decoration: underline dotted ;
  cursor: help ;
}
span#imagedemo:hover::after {
  content: url("../images/tsw88x31pow.gif");
  position: absolute ;
  top: 1.1em ;
  left: 1em ;
  background-color: transparent ;
  z-index: 1 ;
}

If your page uses HTML5, you can even take advantage of the new custom data attributes available in that version to put your tooltip directly in the HTML code instead of the CSS. This is preferable, since tooltips are content, not visual style, and should thus live in the HTML and not the CSS.

The HTML5 code for this is:

<a href="https://www.thesitewizard.com/html-tutorial/what-is-html.shtml" data-tooltip="What is HTML? What is CSS?" class="customdatademo">HTML and CSS</a>.

And the CSS is:

a.customdatademo {
  position: relative ;
}
a.customdatademo:hover::after {
  content: attr(data-tooltip) ;
  position: absolute ;
  top: 1.1em ;
  left: 1em ;
  min-width: 200px ;
  border: 1px #808080 solid ;
  padding: 8px ;
  color: black ;
  background-color: #cfc ;
  z-index: 1 ;
}

Demo: tooltip using the HTML5 custom data attributes: HTML and CSS.

In my opinion, this is a lot of trouble just to display a text tooltip, especially since it will not even work in older browsers. And it will, of course, not work in screen readers, since they won't know the significance of those custom data attributes that you invented. If you don't have any compelling reasons why you need to roll your own tooltip facility manually in CSS, but nonetheless want to insert tooltips, it's easier to just use the title attribute. At least, the latter has been built into web browsers since time immemorial.

Explanation of the CSS Method

You can skip this section if you only intend to use the title attribute for your tooltips.

a#tooltipdemo:hover::after {

The :hover part of the above selector means that the rules only apply when the mouse pointer is over the element. The pseudo-element ::after portion means that these rules apply to the last child element (not a real one that occurs in the HTML code, but the one that is generated by these rules, hence the "pseudo" part) of the current one.

a#tooltipdemo {
  position: relative ;
}

To make sure the tooltip appears near the element over which the mouse is hovering, I used a couple of tricks. Firstly, I gave the original element a relative position (position: relative). This leaves it in its original spot (since I didn't actually change its position), but makes it the reference point for the pseudo-child's position: absolute.

position: absolute ;
top: 1.1em ;
left: 1em ;

The tooltip is then placed 1.1em below the link, making it just slightly below the words so that it doesn't obscure it, and 1em to the right so that it is offset approximately 1 letter to the side. A tooltip manually drawn this way is actually inferior to the built-in title facility, since it will always only appear at the spot you specify, even if that causes it to be clipped or off-screen. Contrast this with title, where web browsers will adjust the tooltip's position automatically, so that it can be seen.

I also gave it a z-index of 1 to make sure that the tooltip appears above the existing content, although it's probably not necessary on this page. (The z-index property controls how elements are stacked on top of each other.)

The rest of the CSS code is just to control the tooltip's appearance and includes the usual run-of-the-mill colour ("color" in US English), padding, border and width properties. In fact, since the design of the tooltip box is now controlled by you, you can also give it rounded corners, a shadow and other effects, if you choose.

content: "What is HTML? What is CSS?" ;

The content property contains the tooltip itself. If you want to use an image, replace the words with the URL of that image, like the content: url("../images/tsw88x31pow.gif") in my demo above.

<a data-tooltip="What is HTML? What is CSS?" ...

The HTML5 method invents a custom data attribute called "data-tooltip", and assigns it some text.

content: attr(data-tooltip) ;

The text is then inserted into the content with the attr() CSS function, that is, loosely-speaking, attr(data-tooltip) takes the value of the data-tooltip attribute and replaces itself with those words. The final result is as though you directly wrote content: "What is HTML? What is CSS?".

Note that although I say that this use of custom data attributes is meant for those using HTML5, in practice, if your visitors have a modern browser, it works even on XHTML 1.0 pages and quite likely also HTML 4.01. Your page will not validate as being syntactically correct, but the HTML5 snippet will work nonetheless. As proof of this, hover your mouse over the demo earlier. Yes, this page has an XHTML 1.0 document type, but the demo uses HTML5-era code. In fact, if your site uses any Google code whatsoever (eg, whether Google Adsense or the ReCAPTCHA code of a web form), chances are that it will also have HTML5 custom data attributes embedded somewhere, regardless of the version of HTML you actually use.

Finally...

If you were to ask my opinion about which method to use, I would recommend unreservedly the title one. But I have dealt with many webmasters over the decades, and know that there will always be people who are extremely concerned about the visual appearance of every detail of their web page, and so will also want to customize the tooltip box to suit their site's design. Whichever way you use, bear in mind the points raised about the problems of such a facility, and make sure that important information is always displayed in plain sight without the need for extra interaction.

Copyright © 2019-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Add a Tooltip in HTML/CSS (No JavaScript Needed)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.