Is it possible to style a title? (and with CSS or js?) [duplicate]

Question

I was wondering if it was possible to style a title:

<a href="#" title="This is a title">Hello</a>

The styling question has two aspects:

• Text formatting / encoding (Which I guess is possible SO does it in questions*).
• The Tooltip styling, can you make it bigger? other colors? etc.

And the other issue I have is how do you "point" to title?

• From CSS
• From Javascript / jQuery

Thanks in advance!

---

*What I ment by text formatting / encoding:

Answer 1

You can put newlines in your title attribute via HTML entities to force a line break in the text. Most browsers these days support this. This is the only change you can make to the native tooltip display of the browser.

<a href="real_link" title="check&#13;&#10;this&#13;&#10;out">foo bar</a>

See the above example on a web page.

As others have pointed out, there exist a large number of plugins for various JS libraries for making custom HTML tooltips which are styleable. Here is the top hit for the Google search "jquery tooltip plugin", reviewing 10 such plugins.

Answer 2

You can create a CSS-only tooltips using the :after and :hover pseudo-class:

<a href="#" class="class-with-tooltip">Link</a>

.class-with-tooltip:hover:after{
    content: 'Tooltip';
    position: absolute;
    padding: 5px;
    border: 1px solid gray;
    background: whitesmoke;
    font-size: 14px;
}

I'm not sure how this going to work in old browsers, but it works in all major browsers.

The position: absolute; is needed to prevent generated content from pushing the markup after the element.