How do I create a self-closing link inside a tipsy tooltip without reloading the page?

Question

I'm using Tipsy to display some content; inside this content I have a link (a big X) that is intended to close the tooltip. However, when clicked, it simply jumps to the top of the page and fails to close the tooltip, even though I have it set to return false. My code looks like this:

$(".favs").tipsy({
    fade: true,
    gravity: 'n',
    trigger: "manual",
    html: true,
    offset: 5,
    opacity: '0.9',
    delayIn: 0,
    delayOut: 0,
    title:
      function() {
        return $("#favs_1").html();
      }
    });

  $(".favs").click(function(){
    $(this).tipsy("show");
    return false;
  });

  $(".closetip").click(function(){
    $(".tipsy").remove();
    return false;
  });

Applied to this HTML:

<div style="height: 1800px;">
    <br /><br /><br /><br />
    <a href="#" class="favs">Favorite Movies</a>
</div>

<div id="favs_1" style="display: none;">
  <a href="#" class="closetip" style="float: right;">X</a>

  Tooltip content
</div>

Relevant fiddle: http://jsfiddle.net/gZkJJ/

I solved half the problem by having any click result in a tooltip closure. I tried to exempt clicks in certain divs from this with event.stopPropagation(); -- that led to the tooltip being closed, but a) the divs in question were not exempt and b) the X still jumped to the top of the page. Same HTML as above, but with this slightly different JavaScript:

$(".favs").tipsy({
    fade: true,
    gravity: 'n',
    trigger: "manual",
    html: true,
    offset: 5,
    opacity: '0.9',
    delayIn: 0,
    delayOut: 0,
    title:
      function() {
        return $("#favs_1").html();
      }
    });

  $(".favs").click(function(){
    $(this).tipsy("show");
    return false;
  });

  $("html, .closetip").click(function() {
    $(".tipsy").remove();
  });

  $(".tipsy, .tipsy-n, .tipsy-inner, .favs").click(function(event){
    event.stopPropagation();
  });

Relevant fiddle for this variation: http://jsfiddle.net/u62eH/

I included the excessive height and spacing so that you can verify the link is either reloading the frame or forcing a scroll to the top, which you can do by scrolling down slightly before hitting the X.

Any help would be much appreciated. I feel like I'm missing something obvious.

Answer 1

In the event handler for clicking on either the html element or the .closetip element, call e.preventDefault() if it was the anchor:

$("html, .closetip").click(function(e) {
    if(e.target.nodeName === 'A')
        e.preventDefault();
    $(".tipsy").remove();
});