The other day I read the article by maxdesign about - well - simple, accessible "more" links. I really liked the idea but instantly thought there was some room for improvement. If you haven't read the article, do so now, because i am not going to explain his solution here again.
You're back? Fine...
I thought to myself: "Ok, there is this information that we are hiding. But why not show that hidden information when the user is hovering the link?" So i opend up the "Edit CSS"-Pane from the Web Developer-Toolbar in Firefox and added some "more" CSS to achieve that.
I emailed Russ to tell him about my idea and thought i would never hear anything about it. But the next day i checked my inbox and had this email from him saying that he liked the idea and i should make a page about it.
Update: Several people have informed me about this not working correctly in Opera, because a) Opera is not redrawing the page when you move away from the link [screenshot] and b) Opera shows his own tooltip even if there is no title on the anchor. Although it is possible to disable this behaviour, i don't think that many people have done this, so it is not an option.
Ondřej Kokeš took the pragmatic way and suggested to move the CSS-Tooltip up. He made a testpage about it, but his Version is not working in IE yet...
Andrew Krespanis suggested to add :focus and :active rules, so users navigating with the keyboard would also see the tooltip. Great idea, has been added.
So here is the result. Hint: hover over the links in the right column to see the effect.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. More about Concerns over wrongful detention
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. More about Worldwide Status of Human Rights
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. More about Concerns over wrongful detention
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. More about Worldwide Status of Human Rights
The answer is really simple. My idea was to add position:relative to the link, in order to allow the span element inside to be positioned absolut in respect to the parent link when hovering. And it worked.
.col2 a:hover,
.col2 a:focus,
.col2 a:active
{
/*
On 'hover' set the anchor to 'position:relative' to get a
measuring point. Somehow IE doesn't like it when this is
in the '.col2 a' declaration...
*/
position: relative;
}
.col2 a:hover span,
.col2 a:focus span,
.col2 a:active span
{
/*
Take the previously hidden span and display it near the anchor
*/
left: 20px;
top: 20px;
width: 100px;
/*
This is just for looks...
*/
padding: 5px;
line-height: 1;
font-size: 80%;
background: #FFFFF6;
border: 1px solid #666;
color: #000;
text-decoration: none;
}
.col2 a:hover span:before,
.col2 a:focus span:before,
.col2 a:active span:before
{
/*
IE doesn't show this - but others do.
*/
content: "Read more";
}This doesn't work in your browser? You have an even better idea? Something? Anything? Please E-Mail me at more@knusperpixel.com