1

だから私はこの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;
}

しかし、それは選択を強調するだけです。しかし、ツールチップ ボックス自体をカスタマイズしたいと考えています。それ、どうやったら出来るの？

4

2 に答える 2

1

ツールチップのスタイルを設定することはできません。content プロパティを attr 式 (?) と組み合わせて使用​​すると、CSS でツールチップのようなものを作成できます: http://jsfiddle.net/mjC7D/

于 2012-10-05T22:55:59.020 に答える
0

このようなカスタムツールチップを作成するために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();
     });​

jsフィドル

于 2012-10-05T23:16:17.063 に答える