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 stackoverflow.com/questions/13175268/… — Rachel Gallen
– Rachel Gallen, Commented Jan 21, 2013 at 19:36
and look at the code on this page telerik.com/community/forums/aspnet-ajax/tooltip/… — Rachel Gallen
– Rachel Gallen, Commented Jan 21, 2013 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
– bernhardh, Commented Jan 21, 2013 at 20:20
possible duplicate of jquery ui tooltip custom class on page load — Liam
– Liam, Commented Apr 22, 2014 at 10:28

Liam · Accepted Answer · 2014-04-29 08:26:31Z

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, 2014 at 8:26

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Mar 23, 2013 at 19:10

Sergiu Chiriac

1311 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fooquency Over a year ago

NB The tooltipClass method is now deprecated in favour of using the classes option to specify additional styles, as of jQuery UI 1.12: api.jqueryui.com/tooltip/#option-classes

Liam · Accepted Answer · 2014-04-22 10:30:24Z

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.

Collectives™ on Stack Overflow

Specify jQuery UI Tooltip CSS styles

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related