CSS Customization of Tooltip on Radio Button

Question

So I have this html code:

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

So here's my attempted css:

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

But that just highlights the selection. But I want to customize the tooltips box itself. How do I do that?

See [Is it possible to style a title? (and with CSS or js?)](http://stackoverflow.com/questions/4383148/is-it-possible-to-style-a-title-and-with-css-or-js). A CSS only solution is presented on [How to change the style of Title attribute inside the anchor tag?](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag), but it leaves the original tooltip in place and won't work in older browsers. — thirdender, Oct 05 '12 at 22:02
@thirdender yah I know how to do it for links but how does it apply to radio buttons/labels. — Charlie Yabben, Oct 05 '12 at 22:26
The tooltip your seeing is actually caused by the `title` attribute. Whether it's on a link or in this case your `LABEL` tag. — thirdender, Oct 08 '12 at 03:26

score 2 · Accepted Answer · answered Oct 05 '12 at 22:55

2

You cannot style tooltips. You can make something that's sorta like a tooltip with CSS using the content property in combination with the attr expression(?): http://jsfiddle.net/mjC7D/

answered Oct 05 '12 at 22:55

cimmanon

67,211
17
165
171

Excellent solution. Adjust the css as needed to make it look like the title, but I would suggest using some other attribute than title, to avoid having the default prompt appear: http://jsfiddle.net/bozdoz/mjC7D/1/ Maybe you could use data-title. – bozdoz Oct 05 '12 at 23:04
You're free to use whatever attribute you like, but there are User Agents who understand title, but don't support any of the other progressive CSS used (:before, :hover, attr(), etc.). – cimmanon Oct 06 '12 at 00:42
right, but if you used title, then two titles will appear. Do you know what I mean? – bozdoz Oct 06 '12 at 00:49

score 0 · Answer 2 · answered Oct 05 '12 at 23:16

you can use jQuery for create custom tooltip like this

<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

CSS Customization of Tooltip on Radio Button

2 Answers2