Clicking anywhere but certain element using stopPropagation

Question

I'm trying to use the answer to this question to implement exactly what that user wants to do.

I am basically making a popover that appears when you click on a link, and when you click anywhere except the popover it will close, and if you click the link that opened it, it will also close it.

The problem I'm having is that nothing happens when I click on the link, when I remove all the stopPropagation stuff it opens but doesn't close.

Here is my JavaScript:

function close_popovers(){
    $('.new_tooltip').remove();
}

function toggle_popover(user_id){
    $('.new_tooltip').show();
    var position = $('#link_' + user_id).position();

    var top_position = (position.top - $('.new_tooltip').outerHeight()) - 10;
    var left_position = (position.left - ($('.new_tooltip').outerWidth() / 2) + ($('#link_' + user_id).outerWidth() / 2));

    $('.new_tooltip').css ({
        top: top_position + "px",
        left: left_position + "px"
    });
    return false;
}

$(document).click(function() {
    close_popovers();
});
$(".new_tooltip, .stoppropagation").click(function(e) {
    e.stopPropagation();
    return false;
});

Here is the html link that opens the popover:

<a href="#" id="link_34" class="stoppropagation" onclick="toggle_popover(34); return false;">Adam Tester</a>

And finally the html of my popover:

<div class="new_tooltip" id="popover_34" style="display:none; top:0px; left:0px; position:absolute; z-index:1000;">
    <div class="top">
        <div class="picture">
            <div class="userphotomedium">
                <img class="actual_photo" src="image url" width="31" height="31" />
            </div>
        </div>
        <div class="infomation">
            <div class="name main_text_colour">Name</div>
            <div class="role">Department of Science and Research - Subdivision 3</div>
        </div>
        <div class="buttons">
            <div class="closebtn_con">
                <div class="crossbtn" style="float:none;"></div>
            </div>
            <div class="viewbtn_con">
                <a href="#" id="viewbio_34" class="button buttonmini biobtns" style="width: 48px;"><div>View Bio</div></a>
            </div>
        </div>
        <div class="floatfix"></div>
    </div>
    <div class="bottom">
        <dl>
            <dt>Department</dt>
            <dd class="main_text_colour">Medical, Business Unit Head</dd>

            <dt>Country</dt>
            <dd class="main_text_colour">United Kingdom</dd>

            <dt>Email</dt>
            <dd class="main_text_colour">adam.tester@edge.co.uk</dd>

            <dt>Contact Number</dt>
            <dd class="main_text_colour">01832 300097</dd>

            <dt>Mobile Number</dt>
            <dd class="main_text_colour">07710 664 689</dd>
        </dl>
        <div class="bio" id="bio_34" style="background-color:#FFFFFF; position:relative; z-index:100;">
            <div class="main_text_colour" style="font-weight:bold;">Biography</div>
            <div id="bio_width_34" style="white-space:pre-wrap; overflow-y:scroll; height:100px; width:100px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        </div>
    </div>
</div>

Check this line `$(".new_tooltip .stoppropagation").click(function(e) {`. I think you need `$(".new_tooltip,.stoppropagation")` — Khanh TO, Jun 25 '13 at 14:00
@KhanhTO that seem to make it work a bit better thanks, but if you click on the document before clicking on the link the popover wont open :( — Adam, Jun 25 '13 at 14:02
Note that `return false;` is equivalent to calling both `e.preventDefault();` and `e.stopPropagation();` in jQuery event handlers. I wouldn't suggest using `return false;` - just prevent the default behavior and/or stop the propagation if you need to. This wouldn't solve your problem, I'm just pointing it out — Ian, Jun 25 '13 at 14:02
you call `$('.new_tooltip').remove();`, how to display it again? I think just need to hide it `$('.new_tooltip').hide();` — Khanh TO, Jun 25 '13 at 14:03
`that seem to make it work a bit better thanks, but if you click on the document before clicking on the link the popover wont open`. Because you already remove it (`$('.new_tooltip').remove();`) — Khanh TO, Jun 25 '13 at 14:06
Oh dear, it's working fine now thanks (except I want it to close when I click the link again). I can't seem to get the thing working in jsfiddle, but I'll keep trying — Adam, Jun 25 '13 at 14:08
And you still don't have posted your jsfiddle or maybe i'm blind — A. Wolff, Jun 25 '13 at 14:09
@Adam Tester: I don't see where you close it when you click on the link again. You always show it when clicking on the link — Khanh TO, Jun 25 '13 at 14:10
@KhanhTO Yeah I haven't added that yet, so not really part of this question. If you want to add an answer with your findings I'll accept it — Adam, Jun 25 '13 at 14:11
Use `$('.new_tooltip').toggle();` or check for the current state and `show`, `hide` correctly.@Adam Tester — Khanh TO, Jun 25 '13 at 14:11

score 1 · Accepted Answer · answered Jun 25 '13 at 14:23

Check some of the mistakes in your code:

Use $(".new_tooltip, .stoppropagation") instead of $(".new_tooltip .stoppropagation").
$('.new_tooltip').remove(); will remove the popup and you cannot display it again. Try $('.new_tooltip').hide(); instead.
In your code, you always show the popup when clicking on the link. Try $('.new_tooltip').toggle(); or check for the current state and show, hide accordingly.

Clicking anywhere but certain element using stopPropagation

1 Answers1