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
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 :-)
Trying to build on the excellent answer above, I was trying to style the bubble and get rid of the old one...
If you are novice like me (in other others, simple task takes hours), it's nice to have the answer all at the same time on the same place :) Here is the solution from a couple of sources, including this question:
<a href="#" title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>
The span removes the browser bubble.
The CSS for the new bubble as example:
.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;
}
And the script above mentioned, inserted at footer:
<script>
$('.selector').tooltip({
tooltipClass: "mytooltip",
});
</script>
Thank you to this question, this and I forgot the other source.