jQuery tooltip popup re-insert title value on close - WORKING YEAH!!!

Question

Hey all,

This is part two of the question:

On closing of the popup I need to re-insert the title="" value to the original value before the popup link was clicked. the popup uses the title='" value to display in the popup and removes it from the original tag so as to not display in the tooltip if someone hovers over the link.

The JS

this.contactPreview = function() {
jQuery("a.contact").live('click', function(e){
        //store clicked link
        var $this = jQuery(this);
        //store title
        var title = $this.attr('title');
        //remove title
        $this.attr('title', '');

        //tip !== "" ? "<br />" + title : "";                                    

        jQuery("body").append("<p id='contact-info'>" + title + "<a id='close-contact' class='close-contact' style='color:red;'>Close</a></p>");

        //store reference to anchor and persist title on close-contact anchor
        jQuery('#close-contact').data('anchor', $this).data('title', title);

        jQuery("#contact-info").css("top", (e.pageY - xOffset) + "px")
                               .css("left", (e.pageX + yOffset) + "px")
                               .fadeIn(500);
    });

    jQuery("#close-contact").live('click', function(){
        //store clicked link
        var $this = jQuery(this);
        //get anchor    
        var $anchor = $this.data('anchor');
        //get title
        var title = $this.data('title');
        //set anchors title back
        $anchor.attr('title', title);            
        //remove tip
        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='this is what is in the popup'>Display popup</a>

Thanks again to all ;)

Answer 1

No need for the hidden field. You can use .data for persisting information. Also I have used live for all the anchor clicks. No need for x dom events when 1 will do.

this.contactPreview = function() {
    jQuery("a.contact").live('click', function(e){
            //store clicked link
            var $this = $(this);
            //store title
            var title = $this.attr('title');
            //remove title
            $this.attr('title', '');

            tip !== "" ? "<br />" + title : "";

            jQuery("body").append("<p id='contact-info'>" + title + "<a id='close-contact' class='close-contact' style='color:red;'>Close</a></p>");

            //store reference to anchor and persist title on close-contact anchor
            $('#close-contact').data('anchor', $this)
                               .data('title', title);

            jQuery("#contact-info").css("top", (e.pageY - xOffset) + "px")
                                   .css("left", (e.pageX + yOffset) + "px")
                                   .fadeIn(500);
        });

        jQuery("#close-contact").live('click', function(){
            //store clicked link
            var $this = $(this);
            //get anchor    
            var $anchor = $this.data('anchor');
            //get title
            var title = $this.data('title');
            //set anchors title back
            $anchor.attr('title', title);            
            //remove tip
            $this.parent.remove();         
        });
    };