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

Answer 2

移动设备中没有鼠标悬停事件，如上面的两条评论所示。但是，您可以在焦点上添加this之类的伪工具提示。