Css悬停工具提示无法在JqGrid中工作
问题描述:
我有一个css工具提示,我用它来提供指导,我正试图将它包含在jqgrid中。Css悬停工具提示无法在JqGrid中工作
但是,悬停时会显示该列的标题。 <span>
没有。我尝试加入title:false
,但没有任何反应。
下面是我使用的CSS:
.tooltip { border-bottom:1px dotted #000000; outline:none; text-decoration:none; cursor:help; }
.tooltip:hover em { padding: .2em 0 .6em 0; font-weight:bold; display:block; }
.tooltip { position:relative; }
.tooltip:hover span { position:absolute; left:1em; top:-4.5em; z-index:99; margin-left:0; width:150px; }
.tooltip:hover em { border:0; margin: -10px 0 0 -55px; float:left; position:absolute; }
.tooltip span { margin-left:-999em; position:absolute; }
这里就是它的应用:
<a class='tooltip' href='#'>
<img alt='Help' src='/Images/question_mark_sm.png' />
<span class='tooltip_classic info'>Guidance Tag</span>
</a>
不知道为什么它会工作其他地方,但在jqGrid的。我尝试过并尝试过,但它似乎并不奏效。 (好吧,图像显示出来,光标发生变化,但没有弹出窗口。)
答
尝试从jqGrid单元中删除工具提示属性。
对我来说,它适用于除IE7以外的所有浏览器。我使用了jqGrig gridComplete事件。
下面是一个例子:
// _YourColID is you column name from colModel
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").removeAttr("title");
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").tooltip({
// each trashcan image works as a trigger
tip: '.tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, -10],
// there is no delay when the mouse is moved away from the trigger
delay: 0,
predelay: 2000,
onShow: function(e){
if ($(e.target).parent("tr").attr('id') != -1) {
yourTooltipFunction($(e.target).parent("tr").attr("id"));
}
}
}).dynamic({
bottom: {
direction: 'down',
bounce: true
}
});
你不包括在内,代码展示了如何使用'中的jqGrid tooltip'类。你使用自定义格式化程序吗?你是否试图增加'z-index'的值(在'.tooltip:hover span'的CSS中)为1000? – Oleg 2012-04-17 22:06:32
我们很可能需要上下文。可能还有一些与jqGrid相关的定位或上下文CSS导致工具提示被隐藏。 – 2012-04-17 22:07:39
@ Oleg,是的,我将'z-index'增加到了9999,而它什么都没做。我没有在jqGrid列中使用自定义格式化程序,我将上面发布的html代码作为列条目之一发送,以便在jqGrid中显示。没有工具提示。 – Cody 2012-04-18 22:13:49