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.


4 answers


Something like this: perhaps?

Answered almost 8 years ago by Tony Crockford

Maybe this jQuery example will help:

Code Explanation Demo

Answered almost 8 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 almost 8 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: also looks good and could be implemented this way. Ben Regenspan almost 8 years ago

You could try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en">
        <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;
        <a href="" class="big" title= "my bold tooltip">mouseover me</a>

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 almost 8 years ago by Tony Crockford

The only way to do this is with Javascript. Take a look at the jQuery "tooltip" plugins.

Answered almost 8 years ago by DFischer