Tooltip for radio buttons in JQuery Mobile

How can I开发者_如何学JAVA create a JQM tooltip with radio buttons. I have twenty sets of five horizontal radio buttons. I would like a tooltip when I mouseover over a button if possible. I think it is something to do with binding with a vmouseover but I am lost.

Been scratching my head over jQuery mobile's virtual mouse events too - maybe they're considering styluses for tablets? Anyway, this could be more elegant but might give you a start in the right direction.

http://jsfiddle.net/7H8Dx/22/

HTML:

<div data-role="page" id="examplePage">   
    <fieldset data-role="controlgroup">
         <legend>Choose a pet:</legend>
         <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
    <label for="radio-choice-1" id="cat">Cat<span id="cat-tooltip"> Click here, cat lover </span></label>

         <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
         <label for="radio-choice-2">Dog</label>
    </fieldset>
</div>

Javascript:

$('#examplePage').live('pageinit',function(event){

    $('#cat').bind('vmouseover', function(){
       $('#cat-tooltip').css({display: 'inline'});
    });  
    $('#cat').bind('vmouseout', function(){
       $('#cat-tooltip').css({display: 'none'});
    });  
});

CSS:

#cat-tooltip {
    font-size: small;
    border: 1px solid black;
    background: #FFF;
    display: none;
}