CODEWITHSUNDEEP
javascriptjqueryhtmlcsstooltip
Zaszczyk
Zaszczyk

Reputation: 29

A href inside my own tooltip

I created my own tooltip, is 1 fullscreen div.over-bg and 1 little div on the middle of screen div.over-box:

<div class="over-bg" id="over-hat">
    <div class="over-box">        
        <a href="">link</a>
    </div>
</div>

And JS to make it showing and hiding:

    $('.over-bg').click(function(){
       $('.over-bg').fadeOut();//hidding when we click outside .over-box
    });

    $('#over-hat .over-box').click(function(){
        return false;// do nothing when we click into .over-box
    });

Everything works perfect, but when I have a link inside div.over-box, it doesn't work. I want to make, tooltip closes only when we click outside that. But links have to work. Any ideas?

Upvotes: 0

Views: 214

Answers (3)

Mat J
Mat J

Reputation: 5632

Change your second code snippet to the following:

$('#over-hat .over-box').click(function(e){
   return($(e.target).prop("tagName")=="A");
});

This will help the a tag to go with its default action and others to ignore the event.

Upvotes: 1

mlienau
mlienau

Reputation: 813

I'm just assuming here, but it sounds like you want .over-bg to fadeOut when you click the link. If so, you'll have to set up another click handler for the anchor itself, because I think the default behavior for anchors is to not bubble their event up.

Take a look at this fiddle http://jsfiddle.net/TCegn/

Upvotes: 0

Pastor Bones
Pastor Bones

Reputation: 7371

Try adding this JQuery statement in addition to what you already have:

$('#over-hat .over-box a').click(function(){
    window.location = $(this).attr('href');
});

Upvotes: 0

Related Questions