954,600 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

ToolTip Won't close after click

I have implemented a tooltip on my navigational links (after clicking on the 2006 Volvo 780). Found here: http://www.lonemountaintruck.com/partners/index2.php

I am pulling the "detailed" view of the truck into the div from a php file(loadtrucks.php).

The "Next Rig" link is the link that is causing the tooltip to stay open after you click it even if you click on "Pick A Different Rig" link at the top right, and it stays open until you actually reload the page. The link looks like this:

[CODE] next.gif [\CODE]

I found that if I use onClick instead of onmousedown, the behavior goes away. However, then I lose the jquery slide/show effect.

Any ideas?

dschuett
Junior Poster
121 posts since Aug 2010
Reputation Points: 9
Solved Threads: 2
 

onmousedown of the next rig button, call the function to fadeout the tooltip before calling the function to close the popup.

stbuchok
Master Poster
730 posts since May 2011
Reputation Points: 120
Solved Threads: 93
 

Thanks for the response!

I have tried adding

$('.effect').tipsy({delayOut: 1});


to the first call in the swapContent function that the onmousedown is calling, but it still doesn't seem to work. - I know "delayOut: 1" works because I have tested.

Here is what my swapContent function looks like if this helps anyone:

<script language="JavaScript" type="text/javascript">
        function swapContent(truck) {
            $('.effect').tipsy({delayOut: 1});
            $("#trucks").html('<center><img style="margin-top:50pxl" src="/img/dana/loader.gif"></center>').show();
            var url = "loadtruck.php";
            var img = new Image();
            img.src = "/img/dana/07volvo780-main.jpg";
            $.post(url, {contentVar: truck} ,function(data) {
                $("#trucks").hide();
                $("#trucks").html(data).fadeIn('slow');
                $("#info").slideto();
                $(".fancyvideo").fancybox({
                    overlayShow: true,
                    frameWidth:640,
                    frameHeight:360
                });
                $("a.fancy").fancybox({
                    overlayShow : true,
                    overlayOpacity : 0.7,
                    transitionIn : "elastic"
                });
                $('.effect').tipsy({fade: true});
            });
        }
    </script>
dschuett
Junior Poster
121 posts since Aug 2010
Reputation Points: 9
Solved Threads: 2
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: