title: Click doesn't always trigger toggle-event
body: <p>I have sort of an imagemap, which is basically a lot of absolutely positioned divs, which, when clicked, will show or hide a tooltip. Looks pretty great, apart from the fact, that it doesn't always "work". It sounds silly, but some times I will have to click a couple of times to trigger the event. Maybe I'm just not clicking hard enough? ;)</p>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;img src="img.png" /&gt;
    &lt;div class="trigger"
      &lt;div class="tooltip"&gt;
        Awesome tooltip is awesome!
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Style</strong></p>
  
  <pre><code>.container {
    width:100px;
    height:100px;
    position:relative; }
  
  img {
      position:relative; }
  
  .trigger {
    width:50px;
    height:50px;
    position:absolute;
    top:50px;
    left:50px; }
  
  .tooltip {
    width:100px;
    height:20px;
    position:absolute;
    top:35px;
    left:35px;
    display:none; }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(".trigger").toggle(function () {
        $(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
        $(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
     }, function () {
        $(this).children(".tooltip").fadeOut(200);
     });
  </code></pre>
  
  <p>The markup and CSS is simplified, but imagine I have several tooltips over the image. When I open one tooltip, all others should be closed. I'm guessing this is where things go wrong, but I can't see the error.</p>
  
  <p>In a similar function on the same site, I've semi-dynamically added some IDs, and hide all that is :not(ID), but I just can't believe that should be necessary.</p>
  
  <p><strong>EDIT:</strong>
  Behold, a Fiddle: <a href="http://jsfiddle.net/CfYRv/" rel="nofollow">http://jsfiddle.net/CfYRv/</a></p>