Nadrzędne style CSS widgetu jQuery UI Tooltip

Question

używam 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> 

i napisałem następujący CSS w oparciu o ich przykład i to działa jak czar:

.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; 
} 

Ale mam 3-4 podpowiedzi, które chcę wyglądać inaczej (jak na przykładzie html powyżej), więc zapakowałem je wewnątrz klasy i zrobiłem to:

.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; 
} 

który nie robi absolutnie nic. W jaki sposób można zmienić typowy .tooltip, aby dostosować różne podpowiedzi w inny sposób?

góry dzięki

Answer 1

Dla tych, którzy chcą zastosować niestandardową klasę do nowego widżetu podpowiedzi (jQuery UI 1.9.1), Ekstraklasy nie wydaje się już pracować, ale pojawiła się nowa opcja o nazwie tooltipClass.

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

W celu rozwiązania potencjalnych konfliktów z CSS jQuery, może trzeba dodać !important do końca linii w swojej css. Dzięki @sisharp za wskazanie, że obecnie :-)

Answer 2

właściwie jej

$(".selector").tooltip("option", "tooltipClass", "custom-tooltip-styling"); 

Zobacz here

Answer 3

Próbując zbudować doskonałą odpowiedź na powyższe, starałem się styl bańki i uzyskać pozbyć się starego ...

Jeśli jesteś początkującym jak ja (w innych, proste zadanie trwa godzin), miło jest mieć odpowiedź wszystko w tym samym czasie w tym samym miejscu :) Oto rozwiązanie z kilku źródeł, w tym tej kwestii:

<a href="#" title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a> 

Rozpiętość usuwa pęcherzyk przeglądarki.

CSS dla nowej bańki jako przykład:

.mytooltip:hover:after{ 
    background: #333; 
    background: rgba(0,0,0,.9); 
    border-radius: 5px; 
    bottom: 26px; 
    color: rgb(255, 77, 85); 
    content: attr(title); 
    right: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 220px;} 
.mytooltip:hover:before{ 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    bottom: 20px; 
    content: ""; 
    right: 50%; 
    position: absolute; 
    z-index: 99; 
} 

.mytooltip { 
    radius: 4px !important; 
    background-color: black; 
    color: rgb(255, 77, 85) !important; 
    padding: 5px 20px; 
    border-radius: 20px; 
    margin: 50px; 
    text-align: center; 
    font: bold 14px ; 
    font-stretch: condensed; 
    text-decoration: none; 
    box-shadow: 0 0 10px black; 
} 

i skrypt wyżej wspomniano, wstawiony w stopce:

<script> 
$('.selector').tooltip({ 
     tooltipClass: "mytooltip", 
}); 
</script> 

Dziękuję tym pytaniu this i zapomniałem innego źródła .

Answer 4

Wypróbowałem wszystkie powyższe opcje i nikt nie pracował dla mnie.

Spojrzałem na etykiecie options docs który powiązany z tym artykułem o theming po przeczytaniu go próbowałem ten, który pracował:

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}}) 

Następnie wystarczy dodać klas CSS 2 z stylizacji:

my-custom-class-name { 
... 
} 
my-custom-class-name-content { 
... 
} 

Należy pamiętać, że może być konieczne użycie! W swoich niestandardowych klasach.