30 November, 2010

Written by on CSS Wizardry.

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 [title] over .tooltip we can automate the process and trim some bytes, thus:

<code><a href="http://twitter.com/jackosborne" title="Follow Jack Osborne on Twitter">Jack Osborne</a>


[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;
}</code>