CODEWITHSUNDEEP
jquery
rosc0
rosc0

Reputation: 1

jquery tooltip - click to open and click to close

I have a jquery popup working that shows on click. I need to make it hide again when the same selector is clicked. But at the moment it just flashes and reloads. I have set it up so it closes if you click anywhere that is not the selector but this is not really what I need.

Here is my code which works perfectly I just need to know how to make it hide when it is clicked again.

Basically what I think I need to know is how to keep track what selector has been clicked (there are multiple items that can be clicked on the same page all with the same class) so I can say if that is clicked again close it??

$(document).ready(function(){
        $("#tooltip").hide();
        $("a.highScoreTooltip").click(function(){                                             
            var game = $(this).attr('title');
            var offset = $(this).offset();
            var top = offset.top - 43;
            var left = offset.left + 155;
            $.ajax({
                type: "POST",       
                data: 'game=' + game,   
                url: "<?=$server_url?>leaderboard_popup.php", 
                cache: false,
                success: function (html) { 
                    $("#tooltip").show();
                    $("#tooltip").html(html);
                    $("#tooltip")
                        .css("top",top + "px")
                        .css("left",left + "px")
                        .fadeIn("fast");
                }      
            }); 
        });
        jQuery(document).delegate(':not(#tooltip)', 'click', function(){
            $('#tooltip').hide();
        });
    });

Upvotes: 0

Views: 2327

Answers (3)

ParPar
ParPar

Reputation: 7569

You can use toggle like that:

$('#book').toggle('slow', function() {  // or toggle(showOrHide)
    $("a.highScoreTooltip").click(function(){                                              
            var game = $(this).attr('title'); 
            var offset = $(this).offset(); 
            var top = offset.top - 43; 
            var left = offset.left + 155; 
            $.ajax({ 
                type: "POST",        
                data: 'game=' + game,    
                url: "<?=$server_url?>leaderboard_popup.php",  
                cache: false, 
                success: function (html) {  
                    $("#tooltip").show(); 
                    $("#tooltip").html(html); 
                    $("#tooltip") 
                        .css("top",top + "px") 
                        .css("left",left + "px") 
                        .fadeIn("fast"); 
                }       
            });  
        }); 
  });

Upvotes: 1

Aram Kocharyan
Aram Kocharyan

Reputation: 20431

First of all you should now use http://api.jquery.com/on/ instead of delegate apparently. You can just use the .click() method of course. All you need is to read in the current state of the object on click. If it is visible, then hide it, if not, then show it. You can achieve this with a global variable, or using the visible selector.

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

Try replacing .fadeIn("fast"); with .toggle("fast") in this section of code:

$("#tooltip")
    .css("top",top + "px")
    .css("left",left + "px")
    .fadeIn("fast");

May not give you the exact same animation (so may not be the answer you want), but it will handle the hiding/showing simply.

Upvotes: 2

Related Questions