Improving CSS tooltips – CSS Wizardry

30 November, 2010

Table of Contents

But only very slightly… Jack Osborne, whom I have followed on Twitter for a while now, posted some time ago a tooltip tutorial whereby you utilise the :after CSS pseudo-element and the attr() function to populate it. His method works by giving an element a title="" attribute and a class of tooltip, and placing the content of the title attribute after the content, all through CSS.

The only technical downside I can see here is the necessity for that class. Using a simple attribute selector we can ditch that and basically say ‘if any element has a title, put that title after it in CSS’. By simply using Improving CSS tooltips – CSS Wizardry over .tooltip we can automate the process and trim some bytes, thus:

Jack Osborne


Improving CSS tooltips – CSS Wizardry{
	position:relative;
}
Improving CSS tooltips – CSS Wizardry: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;
}
Improving CSS tooltips – CSS Wizardry:hover:after{
	left:5px;
	opacity:1;
}