1

我正在使用 jQuery 在我的 jsp 中创建一个弹出工具提示。每一行都有一个带有不同超链接的表。当用户将鼠标悬停在超链接上时，我希望显示工具提示，当用户悬停时，我需要它逐渐消失。

我可以在 IE 中使用下面的代码来实现这一点，但是当在 FF 上尝试相同的页面时，它显示出不同的行为。它实际上是在页面上的其他地方发布工具提示的内容，而不是在工具提示框内，它应该在的地方。此外，不要在悬停时从页面中删除内容。请帮忙。

<style>             
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:2px 5px;
    color:#333;
    display:none;
    width: auto;
}   

/*  */
</style>            
<script type="text/javascript" language="JavaScript">            
    this.tooltip = function(){  
        /* CONFIG */        
        xOffset = 10;
        yOffset = 50;       
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result     
        /* END CONFIG */

        $("a.tooltip").hover(function(e){
            this.t = this.title;
            this.title = "";
            $(body).append("<p id='tooltip' class='tooltip'>"+ this.t +"</p>");
            $("#tooltip")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("slow");        
        }, function(){
            this.title = this.t;        
            $("#tooltip").remove();
        }); 

        $("a.tooltip").mousemove(function(e){
            $("#tooltip")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });         
    };

    // starting the script on page load
    $(document).ready(function(){
        tooltip();
    });
</script>

JSP 生成的 HTML 部分是：

<table width="100%" cellpadding="5px" cellspacing="5px" >
    <tr valign="top" class="h1">
        <td>Version</td><td>Price</td><td>Published</td><td>Edition</td>
    </tr>
    <tr valign="top">
        <td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9781857159042" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9781857159042' src='/images/jackets/s/18/1857159047.jpg' /></td><td>ISBN: 9781857159042 <br>Version: Hardback <br>Price: &pound;10.99 <br>Publication Date:24 Sep 1992 <br>Publisher: Everyman Everyman's Library</td></tr></table> ">Hardback</a></td><td>&pound;10.99</td><td width=auto align=center>1992</td><td width=auto>New edition</td>
    </tr>
    <tr valign="top">
        <td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9781840119688" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9781840119688' src='/images/jackets/s/18/1840119683.jpg' /></td><td>ISBN: 9781840119688 <br>Version: Hardback <br>Price: &pound;16.99 <br>Publication Date:01 Sep 2009 <br>Publisher: Templar Publishing</td></tr></table> ">Hardback</a></td><td>&pound;16.99</td><td width=auto align=center>2009</td><td width=auto></td>
    </tr>
    <tr valign="top">
        <td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9781841939735" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9781841939735' src='/images/jackets/s/18/1841939730.jpg' /></td><td>ISBN: 9781841939735 <br>Version: Hardback <br>Price: &pound;14.99 <br>Publication Date:01 Sep 2011 <br>Publisher: Arcturus Publishing Ltd</td></tr></table> ">Hardback</a></td><td>&pound;14.99</td><td width=auto align=center>2011</td><td width=auto></td></tr><tr valign="top"><td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9781853261183" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9781853261183' src='/images/jackets/s/18/1853261181.jpg' /></td><td>ISBN: 9781853261183 <br>Version: Paperback <br>Price: &pound;1.99 <br>Publication Date:01 Sep 1993 <br>Publisher: Wordsworth Editions Ltd</td></tr></table> ">Paperback</a></td><td>&pound;1.99</td><td width=auto align=center>1993</td><td width=auto>New edition</td></tr><tr valign="top"><td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9781840114881" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9781840114881' src='/images/jackets/s/18/1840114886.jpg' /></td><td>ISBN: 9781840114881 <br>Version: Hardback <br>Price: &pound;14.99 <br>Publication Date:01 Oct 2008 <br>Publisher: Templar Publishing</td></tr></table> ">Hardback</a></td><td>&pound;14.99</td><td width=auto align=center>2008</td><td width=auto></td></tr><tr valign="top"><td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9780141023557" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9780141023557' src='/images/jackets/s/01/0141023554.jpg' /></td><td>ISBN: 9780141023557 <br>Version: Paperback <br>Price: &pound;4.99 <br>Publication Date:26 Jan 2006 <br>Publisher: Penguin Books Ltd Penguin Classics</td></tr></table> ">Paperback</a></td><td>&pound;4.99</td><td width=auto align=center>2006</td><td width=auto>New edition</td></tr><tr valign="top"><td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9781848770010" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9781848770010' src='/images/jackets/s/18/1848770014.jpg' /></td><td>ISBN: 9781848770010 <br>Version: Hardback <br>Price: &pound;14.99 <br>Publication Date:01 Sep 2010 <br>Publisher: Templar Publishing</td></tr></table> ">Hardback</a></td><td>&pound;14.99</td><td width=auto align=center>2010</td><td width=auto></td></tr><tr valign="top"><td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9780956266828" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9780956266828' src='/images/jackets/s/09/0956266827.jpg' /></td><td>ISBN: 9780956266828 <br>Version: Hardback <br>Price: &pound;6.99 <br>Publication Date:28 Oct 2010 <br>Publisher: White's Books Ltd</td></tr></table> ">Hardback</a></td><td>&pound;6.99</td><td width=auto align=center>2010</td><td width=auto></td></tr><tr valign="top"><td><a href="http://botswana.blackwell.co.uk:82/jsp/display_product_info.jsp?isbn=9781906814489" class="tooltip" title="<table><tr><td><img class='jacket' width='75' border='1' alt='ISBN:9781906814489' src='/images/jackets/s/19/1906814481.jpg' /></td><td>ISBN: 9781906814489 <br>Version: Paperback <br>Price: &pound;3.50 <br>Publication Date:02 Jul 2010 <br>Publisher: Classic Comic Store Ltd</td></tr></table> ">Paperback</a></td><td>&pound;3.50</td><td width=auto align=center>2010</td><td width=auto></td>
    </tr>
</table>
4

1 回答 1

1

您在这里缺少一些引号：

$('body').append("<p id='tooltip' class='tooltip'>"+ this.t +"</p>");

我假设这body是在 IE 中默认定义的，但在 Firefox 中没有。通过将其括在括号中，您实际上会触发 jQuery 的选择器引擎来搜索元素，而不是尝试包装（不存在的）变量。

可以在此处找到一个以某种方式工作的示例。然而，您的代码似乎并没有删除“工具提示”。

于 2012-12-13T15:24:47.870 回答