stormdamage.org - Art, Webdesign and CSS.

Here’s a nice easy method for making link tooltips entirely in CSS, without any Javascript. For a demonstration of what I mean, hover over this link This is a tooltip. with your mouse.

To do this, you will need to create a class for the links which require tooltips, and a <span> within that link to include the tooltip text:

<a class=”tooltiplink” href=”#”>this is a link<span> This is a tooltip</span></a>

I have put some spaces inside the tooltip span on both sides, so those with CSS turned off don’t view the link and tooltip text as being scrunched together.

Then add the following styling:

a.tooltiplink span {display:none; }
a.tooltiplink:hover span { display:inline; position:absolute; padding:5px; color:#0c0; background-color:#eee; border:1px solid #000; text-decoration:none; }

The first line ensures the tooltip <span> is hidden, the second line reveals the <span> when the link is hovered over. It does this by switching the ‘display’ from ‘none’ to ‘inline’. The second line also adds some visual styling such as padding, text colour, background colour, and a border. Finally it adds ‘text-decoration:none’, so it does not inherit the underline from the link.

However, There is still a little tweak we need to apply to this CSS, as IE 6 has problems rendering the tooltips. This is easily fixed by adding a font-size to the hover:

a.tooltiplink:hover { font-size:100%; } /* IE6 fix */

I am not sure why this works, as setting the font-size shouldn’t make any difference at all. Suffice to say IE 6 is full of unique little quirks!

So there you have it, tooltips with no Javascript involved.

Here’s something useful - repository of logins and passwords for many different sites: www.bugmenot.com

It’s very handy for sites such as Stock Xchng (royalty free stock photos), Youtube, or the New York Times. Or really any site which tries to glean personal information for no real reason.

They also have a ‘disposable email’ feature for creating temporary email address. This enables you to sign up to sites you know will send you spam, without divulging your personal email address.

This is something I get asked about from time to time. The aim is to have some text which is there in the code, but is hidden when viewing the page.

You may be wondering why replacing images with text could be useful. The reasons are twofold. The first reason is to improve your site’s SEO (Search Engine Optimisation). Having a <h1> title makes it easier for spiders to correctly categorise your page, and a relevant and well-worded tag can improve the page’s ranking. However, for reasons of aesthetics, it’s often nicer to have an image as the header, perhaps with a unique font, or your company’s logo. Rather than have this potentially comprise your page rankings, it makes sense to use CSS as an easy way of having a nice looking page and good SEO.

The second reason is to enable accessibility, to maximise the amount of users who are able to make full use of your site. Pages which rely entirely on images for headers and menus are hard to navigate in text-only browsers. This may mean those with screenreaders have difficulty accessing your content. (more…)