更改 Dojo Tooltip 的 zIndex答案

【问题标题】：Change zIndex of Dojo Tooltip更改 Dojo Tooltip 的 zIndex
【发布时间】：2014-07-03 12:35:08
【问题描述】：

这个问题类似于this one，但我还是想不出一个合适的解决方案。

在我的网站上，我正在尝试实现 dojo 工具提示（不是上面链接中的对话框；单击 here 以查看工具提示文档）。我希望能够将 Tooltip 的 zIndex 更改为我需要的任何内容。如果我使用诸如http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js 或 //cdnjs.cloudflare.com/ajax/libs/dojo/1.9.3/dojo.js 之类的 CDN，我似乎只能让 Dojo 工作，因此尝试更改Tooltip.js 的工具提示文件似乎没有做任何事情。注意：Tooltip.js 在本地包含为：

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

使用页面顶部链接中的信息，我想出了一个破解解决方案。假设 Dojo 工具提示的默认 z-index 为 1000，我将所有其他 div（之前 > 1000）的 z-index 更改为 z-index

关于如何在不更改 Tooltip.js 的情况下更改 Dojo 工具提示的 zIndex 属性的任何建议？

【问题讨论】：

标签： dojo

【解决方案1】：

我建议根据您的要求覆盖 css 规则。

dijit tooltip 上的默认 css 规则如下：

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

或者你可以通过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");
});

【讨论】：

是的，第一个建议效果很好。谢谢。

【解决方案2】：

不确定我是否完全理解您的问题。但也许这将有助于使用 javascript 以编程方式更改 dojo 对象的 z-index：

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

我也会远离更改 Tooltip.js。

【讨论】：

感谢回复....我找到了诸如dojotoolkit.org/reference-guide/1.7/dojo/setStyle.html 之类的文档。到目前为止没有任何工作，但会继续尝试。 +1 添加有用的答案

【解决方案3】：

对于 dojo 1.10，您可以使用 dom-attr 设置/更改样式。

上面的代码将如下所示：

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

问候，米里亚姆

【讨论】：

【解决方案4】：

我建议为此使用 dojo/dom-style。

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

请注意，FireFox 不会接受“z-index”作为有效的 css 属性名称，请参阅 http://www.w3schools.com/jsref/dom_obj_style.asp。始终将 css 属性名称驼峰化。

【讨论】：