JQuery Mobile 中单选按钮的工具提示

Question

如何创建带有单选按钮的 JQM 工具提示。我有二十组五个水平单选按钮。如果可能的话，当我将鼠标悬停在按钮上时，我希望有一个工具提示。我认为这与 vmouseover 的绑定有关，但我迷路了。

Answer 1

我也对 jQuery mobile 的虚拟鼠标事件感到困惑——也许他们正在考虑为平板电脑提供手写笔？不管怎样，这可能更优雅，但可能会给你一个正确方向的开始。

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;
}