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?

you might be interested in the ajax widget see http://stackoverflow.com/questions/13175268/ajax-content-in-a-jquery-ui-tooltip-widget — Rachel Gallen, Jan 21 '13 at 19:36
and look at the code on this page http://www.telerik.com/community/forums/aspnet-ajax/tooltip/tooltip-empty-after-postback-when-dynamically-added-in-a-custom-webcontrol.aspx — Rachel Gallen, Jan 21 '13 at 19:38
Thank you for your post, but thats not what I am looking for. I don't want to load the content of the tooltip with ajax. I want to have tooltips ON dynamic content and there should be different tooltip styles for different clesses (like info, warning, etc..) — bernhardh, Jan 21 '13 at 20:20
possible duplicate of [jquery ui tooltip custom class on page load](http://stackoverflow.com/questions/15054294/jquery-ui-tooltip-custom-class-on-page-load) — Liam, Apr 22 '14 at 10:28

score 13 · Answer 1 · edited Apr 29 '14 at 08:26

13

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

edited Apr 29 '14 at 08:26

Liam

27,717
28
128
190

answered Mar 23 '13 at 19:10

Sergiu Chiriac

131
1
3

NB The `tooltipClass` method is now deprecated in favour of using the `classes` option to specify additional styles, as of jQuery UI 1.12: http://api.jqueryui.com/tooltip/#option-classes – fooquency Apr 12 '18 at 08:42

score 7 · Answer 2 · edited Apr 22 '14 at 10:30

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.

Specify jQuery UI Tooltip CSS styles

2 Answers2