Does anyone know of a library that allows me to easily customize how the title appears when you mouse over a link? I would like to make mine so it is more pronounced than the default browser style.
Thanks.
4 answers
point
Something like this: http://www.kryogenix.org/code/browser/nicetitle/ perhaps?
point
Maybe this jQuery example will help:
- Thanks. This is good. But my ideal solution would be one that all I have to do is apply a class to an element and then its title attribute automatically becomes styled.
- You can add a class and then use jQuery to loop over items of that class, applying the needed Javascript. This ToolTip library: http://jquery.bassistance.de/tooltip/demo/ also looks good and could be implemented this way.
point
You could try something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="screen">
a.big[title] {position: relative;}
a.big[title]:hover:after {
content: attr(title);
position: absolute;
left: 50%;
top: 0.5em;
width: 10em;
padding: 2em;
font-size: smaller; border: 1px solid;
background: yellow;
color: red;
}
</style>
</head>
<body>
<a href="http://example.com/" class="big" title= "my bold tooltip">mouseover me</a>
</body>
</html>
but you'll still get the browsers tooltip coming in as well, so you might want to replace the title attribute with a span and style that as a tooltip.
With javascript you could replace the title attribute with a span on the fly for certain classes of <a> elements, which would overcome the double tooltip problem.
points
The only way to do this is with Javascript. Take a look at the jQuery "tooltip" plugins.
http://www.google.com/search?q=jquery+tooltip&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
