Question

我正在使用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>

Answer 1

你遗漏了一些引用：

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

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

以某种方式工作的例子可以是found here。但是你的代码似乎没有删除“工具提示”。

Jquery代码在IE上工作，但在Firefox上没有

1 个答案: