How to do multi-line Title in div tag?

Question

I'd like to have the following div tag display a tool-tip on mouse hover. But, it displays it as a single line. How can I get it to display several lines?

<div title="Have a nice<br />day">blah</div>

Answer 1

Short of replacing the entire thing with elements generated with JS (or ugly CSS hacks) and positioned with CSS, you can't, at least not reliably.

If I remember rightly, some browsers will render a new line if you have a literal new line in the element, while others will render the unprintable character symbol. It is possible that this might need the entity for a new line instead. Either way - avoid this as having the unprintable character symbol is more than a little suboptimal.

If you have that much content, it probably isn't suitable for a tooltip anyway.

Answer 2

You might want to look into some javascript tooltips.

Answer 3

it seems that modern browsers will show tooltip on new line after carriage return symbol:

<!-- i've pressed Enter after word "line" -->
<div id="myDiv" title="first line
multiline">Hello world!</div>

Or you can try set value by javascript:

var myDiv=document.getElementById('myDiv'); 
myDiv.title = "first line \n multiline";