Pure CSS Tooltips

CSS3 Tooltips

Demo

In all browsers you can get the basic tooltips on HTML elements by using the title attribute like the below example.

HTML Title Attribute

<a href="" title="Example of Tooltip">Tooltip</a>

The above code will make this.

Tooltip

If you hover over the above link you will see the default browser tooltip appear with the text example of tooltip.

This is a great feature for quick and easy tooltips but the problem is that these can't be styled so what do you do if you want a nicer looking tooltip?

CSS Tooltip

To style your tooltips there are a few things you can do.

You can add CSS to the title attribute and you can use the :before or :after to add content into the CSS like this.

[title]{
	position:relative;
}
[title]:after{
	content:attr(title);
	color:#fff;
	background:#333;
	background:rgba(51,51,51,0.75);
	padding:5px;
	position:absolute;
	left:-9999px;
	opacity:0;
	bottom:100%;
	white-space:nowrap;
	-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
	left:5px;
	opacity:1;
}

This is a great solution by just using the title attribute but you will still get the browser default appearing. You will have to use JavaScript to turn off the default behaviour so you can use just the title tooltip.

But in this example I am showing you how to make tooltips using pure CSS with NO JavaScript.

In order to have pure CSS tooltips you need to remove the title attribute from the anchor tag and insert this text inside a span tag placed inside the anchor tag. Confused?

Here is the HTML you will need on your links.

<a href="">adipiscing elit<span>This is the first tooltip</span></a>

Now when you hover over the link you want the contents of the span tag to appear, this can be done just by using the CSS below.

a span{	
	display:none;
	color:#fff;
	background:rgba(51,51,51,0.75);
	padding:20px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width:100px;
	text-align:center;
	position: absolute;
	z-index:10;
}
a { display: inline-block;}
a:hover span{ display:block; }

First you need to hide the first span tag by using the display: none;, now style the tooltip exactly how you want it.

All you have to do now is display the tooltip when you hover over the link by using this.

a:hover span{ display:block; }

That's it, you now have working CSS3 only tooltips.

Using Different Tooltips

In the above example all the tooltips will be exactly the same but what if you want to add some unique styles to some of them. The easiest way of doing this is by adding a class to the spans then you can reference these classes in the CSS.

Here is what you will do if you want to change background colour to something other than black.

<a href="">Duis sit amet pretium purus.<span class="blue">The blue tooltip</span>
<a href="">convallis egestas felis suscipit<span class="red">The red tooltip</span></a>
<a href="">augue pharetra gravida<span class="yellow">The yellow tooltip</span></a>
<span class="green">The green Tooltip</span></a>

And the CSS to change this will be.

span.blue{
	background:rgba(41,137,216, 0.75);
	border:1px solid #1E5799;
}
span.red{
	background:rgba(247,49,49, 0.75);
	border:1px solid #F73131;
}
span.yellow{
	background:rgba(241,218,54, 0.75);
	border:1px solid #f1da36;
	color:black;
}
span.green{
	background:rgba(41,154,11, 0.75);
	border:1px solid #299a0b;
}

View the demo to see how this will look on your application.

Demo

Advertise here 50% Off

Comment