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: (more…)