Question

首先，这是我得到的：

        $('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。

我做错了什么？

在最新的IE和FF版本中测试

Answer 1

抱歉，由于我无法发表评论，我要回答一下，你能找到FF中的开发者工具中的工具提示吗？它应该突出显示工具提示的位置，您应该能够检查＆amp;通过JS控制台设置它的可见性

Answer 2

好的，我只是删除了alert()电话，突然之间就可以了。我不确定alert()如何影响其后面的代码，但似乎在某些时候会中断它。

无论如何，删除用于调试目的的alert()修复了问题，并且tooptip在 FF 和 IE 中都显示正常。

虽然，谢谢你的建议！

即使事件被触发，jQuery简单的工具提示也不显示？

2 个答案: