Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to create an HTML tooltip using CSS without JavaScript

In this article we will explain how to create a search-enginge friendly tooltip using plain HTML and CSS. We will show a couple of approaches and will show their pros and cons. We are NOT explaining tooltips that are created using various JavaScript libraries. If you need a tooltip with JQuery or some other JavaScript UI library, please consult documentation of the respective JavaScript library.

Tooltip using the HTML title attribute

The conventional approach is to wrap the text in some generic container tag and then set an HTML title attribute for that contaner, e.g. :

Place the mouse over <span title="This is our help text shown in a tooltip" style="color: blue; cursor: pointer;">this text</span> to see the help tooltip.

If we use the above code, we will get a tooltip that looks like this:

Place the mouse over this text to see the help tooltip.

Please note that we apply some extra CSS to our SPAN element in order to change the text color and the mouse pointer style. While we could skip that part we use the different style to show the area which activates our tooltip.

This approach works reasonably well, because the tooltip text is in plain HTML tag and can be picked up by search engines creates which means that our tooltips are search-engine friendly. However it is not possible to style the tooltips in such a way that the styling they would work in all web browsers.

Using the a:hover pseudo-class

In cases when we need more control over the style of our tooltips we can use the a:hover pseudo-class to activate the tooltip when the mouse. This approach is based on an idea from this Collection of CSS tricks but we add a bit of extra styling to make our tooltips' look closer to the standard Windows tooltips.

First, we start with the following code into the HTML head section:

<style type="text/css">
a.tooltip {
	position: relative;
	text-decoration: none;
	color: blue;
}

a.tooltip span {
	display: none;
}

a.tooltip:hover span {
	position: absolute;
	top: 40px;
	left: 0px;
	display: block;
	width: 250px;
	color: black;
	background-color: #FFFF40;
	border: 1px solid black;
	padding: 5px;
}
</style>

and when we are to embed a tooltip somewhere on our page we use the following code:

Place the mouse over <a class="tooltip" href="#">this text<span>This help text is shown in the tooltip. It spans multiple lines and works in all browsers.</span></a> in order to see the multiline tooltip.

This code will result the following tooltip:

As you can see the tooltip has the text link wrapped in an A tag and the actual tooltip text is inside the A tag wrapped additionally in a SPAN tag.

This second approach is somewhat similar to the first one but it gives us the ability to control the look of the tooltip by editing the propertiesa.tooltip:hover span CSS rule. Note that if you change the properties in this rule, you will affect globally all the tooltips on all of your web pages that use this rule. You can change the properties of the individual tooltips by editing the inline styles of the tooltip SPAN elements. For example this tooltip will have its width set to 250px instead of the default 200px and its background color will be set to gray instead of yellow.

Place the mouse over <a class="tooltip" href="#">this text<span style="width: 250px; background-color: #D0D0D0;">This help text uses a slightly wider tooltip box and its background is gray.</span></a> in order to see the multiline tooltip.

Here is a demo of our tooltip that uses inline styles:

Place the mouse over this textThis help text uses a slightly wider tooltip box and its background is gray. in order to see the multiline tooltip.

For tooltips that are close to the bottom edge of the screen we can place them above the link text by using a negative top position:

Place the mouse over <a class="tooltip" href="#">this text<span style="top: -100px;">This help tooltip is shown above the text link that activates the tooltip. It spans multiple lines and works in all browsers.</span></a> in order to see the multiline tooltip.

Live demo of the tooltip:

As we can see this second approach allows far greater control over the look of the tooltip and the cost of a slightly more complex CSS rules.