首先,这是我得到的:
$('div.pickup').load('/pages/pickup.php?pickup=' + pickup, function() {
$('div.pickup').fadeIn(300);
var box = $('#tooltip');
var trigger = $('.tip');
trigger.hover(function(e) {
alert('Showing tooltip with text: ' + $(this).attr('title'));
box.text($(this).attr('title'));
box.css({
'top': (e.pageY - 10) + 'px',
'left': (e.pageX + 20) + 'px'
}).fadeIn(300);
}, function() {
box.hide();
});
trigger.mousemove(function(e) {
box.css({
'top': (e.pageY - 10) + 'px',
'left': (e.pageX + 20) + 'px'
});
});
});
表头包含名为.tip
的'触发器类'。具有该类的每个元素都应在悬停时启动工具提示。包含.tip
- 类的 th 如下所示:
<th class="type red b_l b_b tip" title="test">T</th>
我预计当鼠标悬停在包含<th>
的{{1}}元素,悬停事件触发时,工具提示会显示在鼠标光标附近,但我得到的只是来自的对话框提醒()电话。
class="tip"
div元素只是 PHP -file中的一行; #tooltip
CSS:
<div id="tooltip"></div>
我很确定隐藏在另一个元素后面的工具提示(即包含 的表格),#tooltip {
display: none;
position: absolute;
z-index: 1;
background-color: #ffffff;
border: 1px solid #000000;
padding: 3px;
font-family: Consolas, monaco, monospace;
font-size: 0.8em;
letter-spacing: 0.1em;
box-shadow: 0px 3px 4px #000000;
}
是手动设置#tooltip
的唯一元素。我甚至试过z-index
。
我做错了什么?
答案 0 :(得分:0)
抱歉,由于我无法发表评论,我要回答一下,你能找到FF中的开发者工具中的工具提示吗? 它应该突出显示工具提示的位置,您应该能够检查&amp;通过JS控制台设置它的可见性
答案 1 :(得分:0)
好的,我只是删除了alert()
电话,突然之间就可以了。我不确定alert()
如何影响其后面的代码,但似乎在某些时候会中断它。
无论如何,删除用于调试目的的alert()
修复了问题,并且tooptip在 FF 和 IE 中都显示正常。
虽然,谢谢你的建议!