0

首先，这就是我得到的：

        $('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。具有该类的每个元素都应在悬停时启动工具提示。包含-class的th.tip如下所示：

<th class="type red b_l b_b tip" title="test">T</th>

<th>当悬停包含的元素时，我希望工具提示出现在鼠标光标附近，触发class="tip"了悬停事件，但我得到的只是来自alert()调用的对话框。

div 元素只是PHP文件中的#tooltip一行；<div id="tooltip"></div>

CSS：

#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手动设置的元素。我什至试过z-index: 999。

我究竟做错了什么？

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

2 回答 2

0

抱歉，我无法发表评论，所以我必须回答，您能在 FF 的开发人员工具中找到工具提示吗？它应该为您突出显示工具提示的位置，并且您应该能够通过 JS 控制台检查和设置它的可见性

于 2013-08-01T13:56:42.810 回答
0

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

无论如何，删除alert()用于调试目的的解决了问题，并且 tooptip 在FF和IE中都显示良好。

不过，谢谢你的建议！

于 2013-08-01T14:04:45.113 回答