CSS Tooltips without the Javascript

Tooltips are a fantastic method of showing your user more information by hovering over an image, text, or other element on your site.

While there are plenty of solutions using JavaScript and a JQuery Framework, not every web developer knows JavaScript and not every user can utilize JavaScript. A lot of users have downloaded plugins to their browsers which block annoying JavaScript code such as Ads, but these plugins can sometimes prevent code specifically meant to make the website run properly. We are going to explore a pure CSS method of designing and making tool tips to avoid this very problem

we will begin with writing some simple markup for the link. you will need to give it a title which we will use for the tooltip content, and assign it a class:

next is to create some basic CSS styling for our tooltip class:

Our tooltip is now being displayed inline with our link using the position "relative". Next up is to create a dialogue box to contain the body of the tooltip, and place it so it floats above the link:

We are using the :hover and the :after selectors, which selects an element, in this case our link, on mouse over and inserts content after the selected element. We have specified a black background with 80% opacity, and for browsers that do not support RGBA colors we have provided a dark grey background. Slightly rounded corners are created by using the border-radius attribute and we have set the text color to white. Lastly, we have positioned the tooltip box from the left of the link and added a little padding. As well as the styling and positioning, we have set the content property:

This property allows us to insert the content we want which can be a string, a media file or an attribute of the element. In this case we are using the title attribute of the link. Now when you hover over your link a tooltip should be appear above it with the text you set as your link title. We have one problem though, the title information is being shown twice: once in the tooltip and once by the browser. To fix this we need to make a slight change to our HTML:

What we've done here is is wrap the link text in a span tag with its own title attribute. Now the browser will display the title set in the span tag when the link is hovered over. To finish we will add an arrow to the bottom of the tooltip, to give it that little extra touch of style. We do this by using the :before selector and some border styles:

We are using a few border hacks here to create the effect of an arrow: setting the border colors on the left and right to transparent and controlling the border widths. We’ve also positioned the arrow so it sits on the bottom of the tooltip box. And there you have it, a simple tooltip with the title tag of the element hovered over. You could also use this for image alt tags, or even just put your own text into the CSS to pop up where you want.

I would like to give credit to Keenan Payne for helping me with this blog, he is a great web designer and blogger who put in his time to assist me. check out some of his articles below.

How to take WordPress to the cloud with Amazon S3 & CloudFront
Creating a modal window with HTML5 & CSS3