Overriding CSS styles of the jQuery UI Tooltip widget

Question

I am using the jQuery UI Tooltip widget

<li>     <div class="i1">         <a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ">             <span class="ui-icon ui-icon-search"></span>         </a>     </div> </li> <li><a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"><span class="ui-icon ui-icon-info"></span></a></li> <li><a href="#inf-3"title="ΕΠΙΠΕΔΑ"><span class="ui-icon ui-icon-copy"></span></a></li> 

and I wrote the following CSS based on their example and it works like a charm:

.tooltip {     display:none;     background: black;     font-size:12px;     height:10px;     width:80px;     padding:10px;     color:#fff;      z-index: 99;     bottom: 10px;     border: 2px solid white; /* for IE */   filter:alpha(opacity=80);   /* CSS3 standard */   opacity:0.8; } 

But I got 3-4 tooltips that I want to look different (like the example html above) so I wrapped them inside a class and did this:

.i1 .tooltip  {     display:none;     background: red;     font-size:12px;     height:40px;     width:80px;     padding:20px;     color:#fff;      z-index: 99;     bottom: 10px;     left: 50px important!;     border: 2px solid white; /* for IE */   filter:alpha(opacity=80);   /* CSS3 standard */   opacity:0.8; } 

which does absolutely nothing. How can I override the generic .tooltip to customize certain tooltips differently?

Thanks in advance

Answer 1

For those looking to apply a custom class to the new tooltip widget (jQuery UI 1.9.1), extraClass doesn't seem to work anymore, but there is a new option called tooltipClass.

$('.selector').tooltip({         tooltipClass: "your_class-Name", }); 

In order to address potential conflicts with jQuery's css, you may need to add !important to the end of the lines in your css. Thanks to @sisharp for pointing that out :-)