Overriding CSS styles of the jQuery UI Tooltip wid

问题:

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

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

回答2:

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.

回答3:

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.

回答4:

Actually its

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

See here