How To Add A Tooltip In HTML/CSS (No JavaScript Needed)
Có thể bạn quan tâm
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:
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 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. 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-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/.
You are here: Top > HTML Tutorials > How to Add a Tooltip in HTML/CSS (No JavaScript Needed)
Other articles on: HTML, CSS, Website Design
thesitewizard™ News Feed (RSS Site Feed)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 ArticleThis article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
Related Articles- How to Make Links Open in a New Window or Tab
- How to Link to a Specific Line or Paragraph on a Web Page Using HTML
- How to Make a Mobile-Friendly Website: Responsive Design in CSS
- How to Stretch a Background Picture to Fill the Entire Website (or a Column of it) (HTML/CSS)
- How to Move Your Website to SSL/TLS (ie, Convert from HTTP to HTTPS)
- How to Make / Create Your Own Website: The Beginner's A-Z Guide
- Is it Possible to Create a Website Without Buying a Domain Name? The High Price of "Free".
- How to Register Your Own Domain Name
- How to Convert Your Website from XHTML 1.0 to HTML5 the Quick and Easy Way
- How to Set the Height of a DIV Relative to a Browser Window (CSS)
- How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
- How to Insert Meta Tags into a Web Page with BlueGriffon
- How to Play a Song (or Some Other Audio Clip) from a List on a Website
- How to Draw a Horizontal Line on a Web Page with Expression Web
- How to Create a Website Free of Charge
- Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
- What's the Difference Between a Domain Name Registrar and a Web Host?
- How to Make a Mobile-Friendly Website: Responsive Design in CSS
To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)
<a href="https://www.thesitewizard.com/html-tutorial/how-to-insert-tooltips.shtml" target="_top">How to Add a Tooltip in HTML/CSS (No JavaScript Needed)</a>It will appear on your page as:
How to Add a Tooltip in HTML/CSS (No JavaScript Needed)
Từ khóa » Html I Element Tooltip
-
CSS Tooltip - W3Schools
-
How To Create Tooltips - W3Schools
-
Javascript - Add A Tooltip To A Div - Stack Overflow
-
HTML Tooltip | Syntax | How To Add Tooltip In HTML With Examples?
-
Tooltips - Bootstrap
-
Tooltips · Bootstrap V5.2
-
How To Create An HTML Tooltip [+ Code Templates] - HubSpot Blog
-
Setup A HTML Tooltip On Hover Using CSS - W3collective
-
How To Show, Position, And Style A Tooltip In HTML And CSS?
-
How Do I Add A Tool Tip To A Span Element ? - GeeksforGeeks
-
Tooltip From One HTML Element (with :before And :after) - Gists · GitHub
-
How To Create A Tooltip With Only HTML - YouTube
-
How To Create A Tooltip With HTML, CSS Or No Code [EASY]
-
Tooltip | Element Plus