jquery tooltip over dialog
-
20-09-2019 - |
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?
Solution
Your tooltip div has to have greater z-index css property than that of jquery ui div modal dialog.
OTHER TIPS
c0mrade is correct. jQuery's dialog using z-index= 1000 as default, but I didn't see any z-index operations in your code. so the simplest way is to set your own dialog's z-index value > 1000.
Did you try .prepend to the body instead of .append? (with the z-index as stated above)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow