How do I set the zIndex on a dijit.TooltipDialog?

Question

I've created a dijit.TooltipDialog and everything works as it should. However, if another dialog is produced from within the tooltip dialog it shows up behind the tooltip dialog instead of on top of it. I checked the zIndex on the 2 dialogs and the tooltip dialog is 1000 and the other dialog is 950.

I've tried setting the zIndex on the respective container node and the tooltip dialog's "domNode" both with no luck. So does anyone know how to set the zIndex on the tooltip dialog?

expect different behavior in regards to various browsers and nested tooltip dialogs. a tooltipdialog is Not the way to go, as they are modal by design. instead think about dropdown menus as an alternative — mschr, May 13 '12 at 15:34
Other than a full on dialog the tooltip dialog is exactly what I need. I've got a dojox.TreeGrid with a right-click menu item that is to preview the selected document. This fires up the tooltipDialog with the form and everything from the underlying record. However, that form may have prompts, dialogs and other elements that should show up on top of the tooltip dialog. — keithstric, May 13 '12 at 22:34

mschr · Answer 1 · 2012-05-13T16:26:42.077

as you will find if you inspect the dom after creating a programmatic tooltip - the tooltip is placed in an overlay container beneath <body>.

As mentioned, seek alternative methods for this.. But the answer is as follows; For you to successfully set a z-index you must find the correct node - which is not the domNode since the dialog has a 'layer' of its own via the dijit.popup design.

Here's the fiddle for it: http://jsfiddle.net/rQHSP/

In short, this is what you could do.

   myDialog.onShow = function() {
        node = this.domNode
        // loop upwards untill we hit a wall or nodes class mathes popup
        while (node 
           && (!node.className || !node.className.match("dijitTooltipDialogPopup")))
              node = node.parentNode

        console.log(dojo.style(node, "zIndex")
   }

Thanks for the answer. I had read your answer before you posted the code but I couldn't find the underlayAttrs property, but that led me to tooltipDialog._popupWrapper which had a zIndex of 1000. So, using dojo.style(this._popupWrapper,"zIndex",900) fixed the issue. — keithstric, May 13 '12 at 22:30

score 1 · Accepted Answer · answered May 13 '12 at 23:26

Following mschr's answer I couldn't find the underlayAttrs property of dijit.TooltipDialog. But that did lead me to finding _popupWrapper which is the wrapper node of the entire popup. This node had a zIndex of 1000. The below code corrected the issue:

var dij = dijit.byId(dojo.query("[id*='_TooltipDialog_']")[0].id);
dij.onShow = function() {
    dojo.style(dij._popupWrapper,"zIndex",900);
}

How do I set the zIndex on a dijit.TooltipDialog?

2 Answers2

Linked