Question

I am using jQuery to create a pop up tool-tip in my jsp. There is a table with a different hyperlink in each row. When user hovers mouse over the hyperlink, I want the tooltip to be displayed and when user hovers away, I need it to fade away gradually.

I was able to achieve this using below code in IE, but when tried the same page on FF, it is showing a different behaviour. It is actually publishing the content of the tooltip somewhere else on the page and not inside the tooltip box, where it should have been. Also, not removing the content from page on hover away. Please help.

<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>

The HTML portion generated by the JSP is:

<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

Your are missing some quotes here:

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

I assume that body is defined per default in IE, but not in Firefox. By enclosing it in parenthesis you actually trigger the selector engine of jQuery to search for the element instead of trying to wrap the (non-existant) variable.

A somehow working example can be found here. Yet your code doesn’t seem to remove the “tooltip”.