I'm busy introducing myself to jQuery by implementing a little system where onmouseover on an element causes a text balloon to pop up close to the element. I feel like I'm using too much vanilla JS here, so please suggest where I can improve and what is wrong with this code:
<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('span.balloon').each(function() {
this.style.display = "none";
});
$('span.ballooned').mouseover(function(event){
if (event.currentTarget.attributes["balloonid"]) {
var blnArr = $("#" + event.currentTarget.attributes["balloonid"].value);
if (blnArr.length > 0) {
blnArr[blnArr.length - 1].style.display = "inline";
};
};
});
});
</script>
</head>
<body>
<div>
This is some text where I describe a <span class="ballooned" balloonId="bln-1">text field</span> and want to attach extra info to that phrase.
</div>
<span class="balloon" id="bln-1">nvarchar(8)</span>
</body>