InnerHTML doesn't parse linebreaks?

[BillyBoB]

I have a popup which is named tooltip the css for it is:

#tooltip {
position: absolute;
display: none;
visibility: hidden;
background-color: #1a1a1a;
border: 1px solid #282828;
}

 

The HTML for it is:

<div id="tooltip" onmouseout="closeTT();"></div>

 

And the Javascript is:

function tooltip(e) {
obj = document.getElementById('tooltip');

obj.style.visibility = 'visible';
obj.style.display = 'block';
obj.style.backgroundcolor = '#1a1a1a';

var posx = 0;
var posy = 0;

posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop - 5;

obj.style.left = posx + "px";
obj.style.top = posy + "px";

obj.innerHTML = "Private Chat<br/>Ban";
}
function closeTT() {
obj = document.getElementById('tooltip');

obj.style.visibility = 'hidden';
obj.style.display = 'none';

obj.style.left = '0px';
obj.style.top = '0px';

obj.innerHTML = "";
}

 

I am using it like:

<div><a onclick="tooltip(event);">alyis</a></div>

 

This on a click opens the tooltip just fine. I am having problems in the innerHTML when I put a <br /> in it it doesn't seem to want to break.

 

If you would like to see it in action goto http://syckgamingleague.com/ login using the credentials Username: Test Password: test123 and click Chat at the top. Then click alyis where the users are all displayed and the popup box comes up next to your mouse.

 

Im having one other problem also: when you scroll the page down then click the user name the popup box pops up at the top of the page instead of by your mouse...