Untitled

<html>
<head>
<style>

#tooltip-bubble {
    position: relative;
    width: 300px;
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
    padding: 10px;
    font-family: Verdana;
    margin-bottom: 10px;
    margin-left: 50px;
}
</style>
<script>
var timer_id;
var psm = "Test";
var psm2 = "Test 2";

function update_div ()
{
    div = document.getElementById ("tooltip");

    div.innerHTML = "<div id='tooltip-bubble'><img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' /> <b>email@live.com</b><br /><a href='#' onclick='change_psm(1)'><i>" + psm +"</i></a><br />-----</ br><br /><img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' /> <b>email_2@live.com</b><br /><a href='#' onclick='change_psm(2)'><i>" + psm2 +"</i></a><br /></div>";
}

function change_psm (account)
{
	if (account == 1)
		psm = prompt ("New personal message:", psm);
	else if (account == 2)
		psm2 = prompt ("New personal message:", psm2);

	if (psm == "")
		psm = "Set a personal message for this account";
	if (psm2 == "")
		psm2 = "Set a personal message for this account";

	update_div ();
}

function clear_tooltip ()
{
    document.getElementById ("tooltip").innerHTML = "";
    div.style.display = "none";
}

function tooltip ()
{
    update_div ();

    div.style.display = "block";
    timer_id = setTimeout ("clear_tooltip ()", 5000);
}
</script>
</head>
<body>
<div onmouseover="tooltip()">FRIENDLY NAME</div>
<div id="tooltip""></div>
</body>