CODEWITHSUNDEEP
javascriptjquery
Johan Cruijff
Johan Cruijff

Reputation: 183

Clicking link closes tooltip; how to prevent this

I'm using the following code to toggle a tooltip

$('.call-out').toggle(
    function() { 
        $(this).find('.tip').addClass('tip-position').fadeIn("fast");
    },
    function() { 
        $(this).find('.tip').fadeOut("fast");
    }
);

In my .tip there is a list with some anchors, how do I prevent the tip from closing when clicking one of these links?

I tried using .not(); to exclude the anchors from the call-out but this is not working.

$('.call-out').not('a').toggle(
    function() { 
        $(this).find('.tip').addClass('tip-position').fadeIn("fast");
    },
    function() { 
        $(this).find('.tip').fadeOut("fast");
    }
);

HTML sample 

<div class='call-out w PMPB12UN'>
   <div class='tip'>
      <img src="images/graph/DFN2020MD-6.png" />
      <p class="description">
         xx
      </p>
      <ul class="bullet-blue-list">
         <li><a href="/pip/PMPB12UN" target="_blank" title="xx">Product Information</a></li>
         <li><a href="#" target="_blank" title="#">xx</a></li>
         <li><a href="#" target="_blank" title="Buy online">Buy online</a></li>
      </ul>
   </div>
   <div class='product_image'>
      <img src="images/graph/DFN2020MD-6.png" />
   </div>
   <div class='label'>
      <div class='top'>
         <p class='title'>xx</p>
      </div>
      <div class='middle'>
      </div>
      <div class='bottom'>
         <p class='package'>DFN2020MD-6</p>
      </div>
   </div>
</div>

Thanks!

Upvotes: 1

Views: 368

Answers (1)

PSL
PSL

Reputation: 123739

One way to do this is by adding event.stoppropagation on click of hyperlink. So that the click event on children anchor is not propagated to the parent which causes toggle.

$('.call-out a').click(function(e){
e.stopPropagation();
});

Fiddle

Just note that this version of toggle is deprecated and not supported in later verisons of jquery.

See .toggle() Doc. For the lates ones where you will registed click events and perform toggle manually. It doesn't support itself as a virtual event and 2 callbacks anymore.

Upvotes: 2

Related Questions