$tooltip customization

by David Gonzalez

HTML

<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>
  <label for="age">Your age:</label>
  <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>

CSS

.custom-tooltip-styling {
  color: red;
}

.custom-tooltip-wrapper {
  border: 1px solid red;
}

JavaScript

$(document).tooltip({
   tooltipClass: "custom-tooltip-styling",
   open: function(event, ui) {
     $(ui.tooltip).wrap("<div class='custom-tooltip-wrapper'></div>");
   },
   close: function(event, ui) {
     $('.custom-tooltip-wrapper').remove();
   }
 });