Я использую jQuery UI Виджет подсказки
<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>
и я написал следующий CSS на основе их примера, и он работает как шарм:
.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;
}
Но у меня есть 3-4 подсказки, которые я хочу посмотреть по-другому (например, пример html выше), поэтому я завернул их внутри класса
и сделал это:
.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;
}
который абсолютно ничего не делает. Как я могу переопределить общий .tooltip для настройки определенных всплывающих подсказок по-разному?
Заранее спасибо