Overriding CSS styles of the jQuery UI Tooltip widget

Actually its

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

See here

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.

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