Critique on jQuery Use

javascript, jquery

Solution

$(function() {
    $("span.balloon").hide();

    $("span.ballooned[balloonid]").mouseover(
        function() {
            var balloonid = "#" + $(this).attr("balloonid"); 
            $(balloonid).css("display", "inline");
        });
});

Problem

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> ```

Original source