Cool tooltips with Tooltipsy – How to use them with a jquery dialog

One of these days I discovered this wonderful JQuery plugin which allows us to create some cool tooltips with jquery.

The credits go to Brian Cray for creating this great plugin.

The usage is simple. All you have to do is to download the javascript file from the plugin website and then apply the plugin to you object. By default, the plugin shows on the tip content the title of the object, but this can easily be overridden by using the “content” attribute, and passing the desired html.


By default tooltipsy uses the .tooltipsy css class. Unless you have to rename it, you can create a simple css class like this:

    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;

Now, let’s imagin this div.

<div id="mydiv">I want a tooltip</div>

Let’s add a title (the title will be the content of the tooltip).

<div id="mydiv" title="I am the tooltip text">I want a tooltip</div>

Now all you have to do now is to apply tooltipsy to this div:


As simple as that.

When I first used this plugin I was using it on a element inside a JQuery dialog. The tooltip stayed always behind the dialog.

How can this be solved? Simple, all it’s needed is to make the tooltip z-index greater than the dialog, using the “show” attribute:

    show: function (e, $el) 
        $el.css({ 'z-index':'1000000'})

This solves the problem ;)

Leave a Reply

Your email address will not be published. Required fields are marked *



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>