Настройка 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

Вы не можете стилизовать всплывающие подсказки. Вы можете создать что-то вроде подсказки с CSS, используя свойство content в сочетании с выражением attr (?): 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