Written by Harry Roberts 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>
Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.
You can now find me on Mastodon.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.