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

What exactly do you mean by wrapping, is an encompassing element or just another class applied to the tooltip? — Marcus Whybrow, Jan 24 '11 at 10:14
The current accepted answer is very outdated and the link is dead. See the highest voted answer below for the current working information — , Jul 08 '15 at 21:11

Chaya Cooper · Accepted Answer · 2013-10-11T14:34:16.587

73

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

edited Oct 11 '13 at 14:34

answered Oct 27 '12 at 21:00

Chaya Cooper

2,566
2
38
67

My pleasure :-D (Especially if it might save someone the time that it took for me to figure it out ;-) ) – Chaya Cooper Jan 15 '13 at 20:28
It adds new class but does not change any style! – Andrew Liu Aug 30 '13 at 00:10
@FredTheLover - It worked at the time I posted the solution, but it's possible that there have been subsequent changes to the tooltip widget – Chaya Cooper Aug 30 '13 at 04:15
6

If you find that this does not work add !important to the end of the lines in your css. This is probably because you also include the css from jquery and they conflict with each other. – sisharp Oct 11 '13 at 13:50
For those who are trying to change `background-color` of a tooltip: in your custom CSS class you must first remove/override *background-image* (e.g. `background-image: none;`), then it'll work. Discovered thanks to the comment to the following [false bug report](http://bugs.jqueryui.com/ticket/8706). – informatik01 Nov 06 '15 at 19:26
4

For those of us in the future, tooltipClass has been depricated. Follow this link for the new way of doing it: http://api.jqueryui.com/tooltip/#option-classes – naed21 Mar 30 '17 at 19:42
I'm so glad that jQuery finally integrated it properly. It's time to update my version and check it out :-) – Chaya Cooper Mar 30 '17 at 23:57

user2060451 · Answer 2 · 2016-09-28T21:50:30.667

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.

score 1 · Answer 3 · answered Jun 21 '13 at 19:14

1

Actually its

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

See here

answered Jun 21 '13 at 19:14

FredTheLover

1,009
10
19

score 1 · Answer 4 · answered May 17 '17 at 23:01

I tried all of the options above and none worked for me.

I looked into the tooltip options docs which linked to this article about theming, after reading it I tried this which worked:

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

Then just add the 2 CSS classes with your styling:

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

Note that you might have to use !important in your custom classes.

score -1 · Answer 5 · answered Mar 14 '19 at 11:14

-1

Overriding CSS styles of the jQuery UI Tooltip widget

5 Answers5

Linked