Have you ever wanted to have definition pop-ups on your website but have never been brave enough to attempt the jQuery that would be needed? Well I needed to do this just yesterday and thought there must be an easier way…
Well I have found a way to achieve this by just using CSS! Yep, just CSS. This is done by having a span that is hidden inside your ‘a’ element. Then on hover of your ‘a’ you just simply show the content of the span. All you then have left to do is position your span on your page and style it up however you like. Below is the code to achieve this…
Your ‘a’ element needs to look like this :
<a href="#">Title <span>This is the tooltip</span></a>
And the style needs to look something like this:
a { z-index:10; } a:hover { position:relative; z-index:100; } a span { display:none; } a:hover span { display:block; position:absolute; float:left; white-space:nowrap; top:.5em; left:.5em; background:#fffcd1; border:1px solid #444; color:#444; padding:1px 5px; z-index:10; }
CSS Tooltip
Although the negative to using this technique is that Google would see this as anchor text so it would associate this with the link. This could potentially water down your keywords on the page this is running on! So as with all techniques this needs to be used with consideration to whether it is the right solution for the situation?
Well guys I hope this helps solve a problem as it really did help me out.
PS – Please be nice as this is my first post on Six Crayons!
Toodles…
Great problem solving will try this for one of my projects.
From the perspective of accessibility, I’d like to point out that screenreaders would not read the text inside the span.
Cool post – but would be even better if you had a working demo of the tooltip within the post somewhere.