jQuery tooltip not working as expected - REVISED

Question

Hello all,

Ok I fixed the original problem but I would like now is to add the title value back to the anchor tag of id="contact" from the id="contact-info" popup before I remove the popup

The JS

this.contactPreview = function() {
jQuery("a.contact").click(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br />" + this.t : "";
        jQuery("body").append("<p id='contact-info'>"+ this.t + "<a id='close-contact' class='close-contact' style='color:red;'>Close</a></p>");
        jQuery("#contact-info")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px")
            .fadeIn(500);
    });

    jQuery("a.close-contact").live('click', function(){
        // Need to re-insert the popup info into the original title tag of contact
        jQuery('#contact-info').remove();          
    });
};

// Use jQuery() instead of $()for WordPress compatibility with the included prototype js library which uses $()
// http://ipaulpro.com/blog/tutorials/2008/08/jquery-and-wordpress-getting-started/
// See http://chrismeller.com/using-jquery-in-wordpress
jQuery(document).ready(function(){

    // Call the function here
    contactPreview();

});

The CSS

#contact-info{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;

The HTML

<a class='contact' title='Some info to display'>Display Info</a>

Thanks in advance for any help on this

Answer 1

http://docs.jquery.com/Events/live will do the trick.

This will automatically add the click event when the CLOSE <A> is created. What you did is you added the event when the document is loaded, but the CLOSE <A> is not loaded yet.

$("a.close-contact").live("click", function()
{
    $(this).fadeOut(500);
});