Specify jQuery UI Tooltip CSS styles

Question

I am using jquery ui 1.9 in an ajax based website.

I have the following code:

This is a <span title="Some warning" class="warning">warning</span> message<br />
This is a <span title="Some info" class="info">info</span> message

Using jquery ui tooltip would work, even for dynamic content:

$(function() {
    $( document ).tooltip();
});

But I want different tooltip styles for each of this message-types. For example red color for warning and blue for info and it should work for dynamic content too.

Any ideas?

Answer 1

You need to use the toolTipClass property to specify the css class

$(document).ready(function() {
    $( ".warning" ).tooltip({
        tooltipClass: "warning-tooltip"
    });
    $( ".info" ).tooltip({
        tooltipClass: "info-tooltip"
    });  
});