Spice up those boring link tool tips.
Many web pages include
title attributes on links. When you hover over the link, the browser displays a tool tip that gives more information about the link. The font and color of the tool tip are determined by the theme settings of the underlying operating system. This means you have some control over what tool tips look like, but they'll still look pretty boring. This hack makes link tool tips sexier and more functional at the same time by replacing the tool tip with a translucent floating window that contains both the title and the link URL.
This user script runs on all pages. It works by finding all the links on the page (using the
document.links collection) and adding
mouseover, mouseout, focus, and
blur events to each one. On
focus, it creates a wrapper <
div> containing the link title and URL and positions it on the page just below the cursor. On
blur, it removes the <
div> element. It sounds simple, but determining the exact position and dimensions of the <
div> element is quite complicated, as you can see in the
Also, I would like to point out that the nice title <
div> is styled with rounded corners, using the
-moz-border-radius CSS rule. It is also slightly translucent, thanks to the
-moz-border-radius property is a Mozilla-specific extension to CSS. The upcoming CSS 3 specification will likely include a
border-radius property. ...