jquery tooltip over dialog

Question

I have a simple html multiline tooltip implementation:

this.tooltip = function(tag)
{
xOffset = 10;
yOffset = 20;

$(tag + ".tooltip").hover(function(e){
    this.t = this.title;
    this.title = "";
    $("body").append("<p id='tooltip'>"+ this.t +"</p>");
    $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");
},
function(){
    this.title = this.t;
    $("#tooltip").remove();
});
$(tag + ".tooltip").mousemove(function(e){
    $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});
};

It works perfectly on a page, but does not display a thing over jquery.ui.dialog. Is there a way to fix that?

Answer 1

Your tooltip div has to have greater z-index css property than that of jquery ui div modal dialog.

Answer 2

Did you try .prepend to the body instead of .append? (with the z-index as stated above)