joe 0

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

1
point

Something like this: http://www.kryogenix.org/code/browser/nicetitle/ perhaps?

Answered about 7 years ago by Tony Crockford
1
point

Maybe this jQuery example will help:

Code Explanation Demo

Answered about 7 years ago by TailorDMI
  • 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. joe about 7 years ago
  • 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. Ben Regenspan about 7 years ago
1
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.

Answered about 7 years ago by Tony Crockford
0
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

Answered about 7 years ago by DFischer