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

Question

first of, this is what I got:

        $('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'
                });
            });

        });

A table header contains the 'trigger class' named .tip . Every element with that class should initiate the tooltip when hovered. The th containing the .tip -class looks like this:

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

I expected the tooltip to show up near the mouse cursor when hovering the <th> element containing class="tip" , the hover event fired but all I got was the dialogue box from the alert() call.

The #tooltip div element is just one line in the PHP -file; <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;
}

I'm pretty sure the tooltip aint hidden behind another element (ie. the table containing the ), #tooltip is the only element with a z-index manually set. I even tried z-index: 999 .

What am I doing wrong?

• Tested in latest IE and FF versions

Answer 1

Sorry I've to put an answer since I can't comment, can you locate the tool tip in the developer tools in FF ? It should highlight for you the location of the tool tip, and you should be able to check & set it's visibility via the JS console

Answer 2

Okay, I simply removed the alert() call and out of a sudden it works. I'm not sure how alert() affects the code following on it, but it seems to interrupt it at some point.

Anyways, removing the alert() which was for debug purposes fixed the problem and the tooptip shows fine in both, FF and IE .

Though, thank you for your suggestions!