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.
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.
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:
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.
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.
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 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.
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.
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.
The CSS to make the tooltip is as follows:
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:
And the CSS is:
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:
And the CSS is:
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.
You can skip this section if you only intend to use the title
attribute for your tooltips.
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.
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
.
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.
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.
The HTML5 method invents a custom data attribute called "data-tooltip", and assigns it some text.
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. 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.
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-2024 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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Tooltip in HTML/CSS (No JavaScript Needed)