Change zIndex of Dojo Tooltip

Question

This question is similar to this one but I still cannot come up with a suitable solution.

On my site I am trying to implement the dojo Tooltip (not dialog Box as in the link above; click here to see Tooltip documentation). I would like to be able to change the zIndex of the Tooltip to whatever I need. I can only seem to get Dojo to work if I use a CDN such as http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js or //cdnjs.cloudflare.com/ajax/libs/dojo/1.9.3/dojo.js, so trying to alter the javascript of the tooltip file for Tooltip.js did not seem to do anything. Note: Tooltip.js was included locally as:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<script src="dojo/Tooltip.js"></script>

Using info from the link at the top of the page, I was able to come up with a hack solution. Assuming the default z-index for the Dojo tooltip is 1000, I changed the z-indices of all other divs (that were previously > 1000) to z-index < 1000. This solved the problem, and now the Dojo tooltip can be seen in front of these divs (previously was behind).

Any suggestions on how to alter the zIndex property of the Dojo tooltip without altering Tooltip.js?

GoinOff · Answer 1 · 2014-07-03T15:34:01.840

1

Not sure if I fully understand your problem. But maybe this will help in changing the z-index of a dojo object programmatically using javascript:

dijit.byId('<Dojo ID of Tooltip>').attr("style","z-index:999");

I would also stay away from altering Tooltip.js.

edited Jul 03 '14 at 15:34

answered Jul 03 '14 at 14:52

GoinOff

1,792
1
18
37

Thx for the reply....I found documentation such as http://dojotoolkit.org/reference-guide/1.7/dojo/setStyle.html. So far nothing working but will keep trying. +1 for adding a useful answer – The One and Only ChemistryBlob Jul 03 '14 at 21:35

score 1 · Accepted Answer · answered Jul 07 '14 at 12:12

I would recommend to override css rule according to your requirement.

Like by default css rule on dijit tooltip is as follow:

.dijitTooltip {
   position: absolute;
   z-index: 2000; // You can write your desired z-index
   display: block;
   left: 0;
   top: -10000px;
   overflow: visible;
}

Or you can try via JS

dojo.query(".dijitTooltip:visible").style("z-index", 'You desired value'); // <1.6

//>1.7
require(["dojo/query","dojo/dom-style"],function(query, domStyle){
    domStyle(query(".dijitTooltip:visible"), "z-index", "You desired value");
});

Yes, the first suggestion worked perfectly. Thank you. – The One and Only ChemistryBlob Jul 07 '14 at 14:31 — The One and Only ChemistryBlob, Jul 07 '14 at 14:31

score 0 · Answer 3 · answered Jul 04 '14 at 08:12

0

For dojo 1.10 you could use dom-attr to set/change the style.

The code above will then look like that:

domAttr.set("mywidgetId","style","z-index:999");

Regards, Miriam

answered Jul 04 '14 at 08:12

MiBrock

1,100
1
11
22

score 0 · Answer 4 · answered Jul 07 '14 at 09:48

I would recommend using dojo/dom-style for this.

domStyle.set(tooltip.domNode, "zIndex", "999");

Do notice that FireFox will not accept "z-index" as a valid css property name, see http://www.w3schools.com/jsref/dom_obj_style.asp. Always camelcase the css property name.

Change zIndex of Dojo Tooltip

4 Answers4