Overriding CSS styles of the jQuery UI Tooltip widget

Question

I am using the jQuery UI Tooltip widget

    

        
            

        

                      

              相关标签:
       
      

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

Answer 2

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.

Answer 3

Actually its

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

See here

Answer 4

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.

Answer 5

Other solution :

$.widget( "ui.tooltip", $.ui.tooltip, {

    options:{

          tooltipClass: "your_class-Name",

    }

});