Jquery - Show Tooltip IF Span is Empty

I'm trying to only show #tooltip when the span #attr-val is empty. But my IF statement doesn't seem to be working, the tooltip is always showing whether the span is empty or not... any help is greatly appreciated!

$(document).ready(function() {

    if ($("#attr-val").is(":empty")) { 
        $("#addtobag > input").hide( );
        $("#addtobag").hover(function(e){                                             
            this.t = this.title;
            this.title = "";
            $("#addtobag").css("cursor","pointer");                               
            $("body").append("<p id='tooltip'>Please Select A Size</p>");
            $("#tooltip")
                .css("top",(e.pageY - 10) + "px")
                .css("left",(e.pageX + 20) + "px")
                .show();        
        },
        function(){     
            $("#tooltip").remove();
        }); 
        $("#addtobag").mousemove(function(e){
            $("#tooltip")
                .css("top",(e.pageY - 10) + "px")
                .css("left",(e.pageX + 20) + "px");
        }); 
    }
});

Example HTML is below:

<div>
<div class="options">
    <span class="prompt">
    Size: <span id="attr-val"></span><br />
    </span>

    <span>
        <input type="radio" name="Product_Attributes[1]:value" value="6" /> <a class="radio-select" href="#">6</a></span>
    <span>
        <input type="radio" name="Product_Attributes[1]:value" value="6.5" />   <a class="radio-select" href="#">6.5</a></span>
        <p class="soldout" title="Sold Out">7</p>
    <br class="clear" />
</div>开发者_开发技巧;

<span id="addtobag"><input type="image" src="/images/2011/btn_addtobag.gif" alt="" /></span>