How to display a tooltip while using blockui?

Question

My site is using the jQuery tooltip plugin (http://jquery.bassistance.de/tooltip/demo/) and the blockui plugin.

I am applying the tooltips like this:

$(function() {
    $("span.helptooltip").tooltip({
        showURL: false,
        showBody: " - "
    });
});

That works like a charm everywhere except a DIV that is being shown using blockui:

$.blockUI( {
    theme: true,
    title: "my div",
    message: $('#divName'),
    css: { width: '325px'}
});

In the DIV that gets shown on top of the blocked UI, the tooltip will not display over the span like it does throughout the rest of the site.

Any ideas on how to get this tooltip to display while in the blocked ui?

Answer 1

Change the CSS to have a higher z-index for the tooltip than for the block-UIed div. You need to:

1. Show the div.
2. Use Firebug or similar to figure out its z-index.
3. Add CSS to have a higher z-index for the tooltip content.

Something like:

.tooltipClassName div
{
    z-index: 1001;
}

Answer 2

Thanks Craig for your answer. It lead me to this solution which worked:

Add the baseZ property in the blockUI declaration with -1:

$.blockUI( {
    theme: true,
    title: "my div",
    message: $('#divName'),
    css: { width: '325px'},
    baseZ: -1
});