html - 单选按钮上 Tooltip 的 CSS 自定义

Question

所以我有这个html代码：

<label class="selection-confirm" title="some long tool-tip text goes here"><input type="radio" name="options" value="1" class="required selection-confirm" > Option1</label>

所以这是我尝试的css：

.selection-confirm:hover {
    background-color:#FC0107;
}

但这只是突出了选择。但我想自定义工具提示框本身。我怎么做？

Answer 1

您无法设置工具提示的样式。您可以使用 content 属性结合 attr 表达式（？）制作类似于 CSS 的工具提示：http: //jsfiddle.net/mjC7D/

Answer 2

您可以使用 jQuery 创建自定义工具提示，如下所示

<label class="selection-confirm" title="some long tool-tip text goes here"><input type="radio" name="options" value="1" class="required selection-confirm" > Option1</label>​

#tooltip{
    border-radius:5px;
    border:thin black solid;
    background:red;
    color:white;
    width:200px;
    height:auto;
}​

$('.selection-confirm').mouseover(function(e) {
         var tip = $(this).attr('title');    
        $(this).attr('title','');
        $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');     
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
        $('#tooltip').fadeIn('500');
        $('#tooltip').fadeTo('10',0.8);

    }).mousemove(function(e) {
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );

    }).mouseout(function() {
        $(this).attr('title',$('.tipBody').html());
        $(this).children('div#tooltip').remove();
     });​

jsFiddle