super simple html5 tooltips

<style>
/* this is css */
#theid {
-moz-transition-property:opacity;
-moz-transition-duration:1.3s;
-webkit-transition-property:opacity;
-webkit-transition-duration:1.3s;
opacity:1.0;
font-weight:lighter;
font-family:"calibri";
font-size:18px;
text-shadow:1px 1px 0px rgba(255,255,255,0.6);
}
</style>


<!-- this is just html with javascript events -->
<div id='theid'>
this is the content div
</div>
<a href='/#' onmouseover='showtipno(0)' onmouseout='_tooltip.style.opacity=0.0;'>one</a> ..
<a href='/#' onmouseover='showtipno(1)' onmouseout='_tooltip.style.opacity=0.0;'>two</a> ..
<a href='/#' onmouseover='showtipno(2)' onmouseout='_tooltip.style.opacity=0.0;'>three</a> ..

<script>
// this is javascript
var _tooltip = document.getElementById('theid');
var helptips = [
    "tooltip #1",
    "tooltip #2",
    "something else for number three",
];
function showtipno(_tipno) {
    _tooltip.innerHTML = "<img src='http://67.91.221.89/img/help.png' class='helpico'> &nbsp;"+helptips[_tipno];
    _tooltip.style.opacity = 1.0;
}
</script>