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"
    });  
});

Answer 2

First, here is the code that works:

$(function() {
    $('#warning-binder-element').tooltip({
        items: '.warning',
        tooltipClass: 'warning-tooltip',
        content: function () {
            return $(this).prev('.warning-toast').html();
        },
        position: {
            my: "right bottom",
            at: "right top-10"
        }
    });

    $('#info-binder-element').tooltip({
        items: '.info',
        tooltipClass: 'info-tooltip',
        content: function () {
            return $(this).closest('.doo-hicky').next('.info-toast').html();
        },
        position: {
            my: "left bottom",
            at: "left+10 top-10"
        }
    });  
});

A few notes on the above:

• The selector for .tooltip() is not the item you want to have a tooltip pop up on, it is an element on the page that the tooltip object and its associated events are bound to.
• If you attempt to bind two tooltips to the same object, only the last one will persist so binding both to $(document) will not work (which is why I have bound the two different tooltip objects to two different elements on the page).
• you can bind the tooltip object to the item that will get the tooltip, but if you use a class selector, this may lead to ill effects.