Add line break within tooltips

Question

Hello,

How to add line breaks within a HTML tooltip.

I tried using <br/> and \n within the tooltip like

<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>

This was useless and i could see the <br/> and \n within the tooltip instead of executing ...

Any suggestions will be helpful.

Answer 1

it is possible to add linebreaks within native HTML tooltips by simply having the title attribute spread over mutliple lines.

However, I'd recommend using a jQuery tooltip plugin such as Q-Tip: http://craigsworks.com/projects/qtip/.

It is simple to set up and use. Alternatively there are a lot of free javascript tooltip plugins around too.

edit: correction on first statement.

Answer 2

I 've had the same question: http://stackoverflow.com/questions/3320081/how-does-stack-overflow-display-tooltip-for-the-questions

Answer 3

I found it. It can be done by simply doing like this

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>