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? ;)

**Markup**

```
<div class="container">
  <img src="img.png" />
  <div class="trigger"
    <div class="tooltip">
      Awesome tooltip is awesome!
    </div>
  </div>
</div>

```

**Style**

```
.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; }

```

**Javascript**

```
$(".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);
   });

```

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.

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.

**EDIT:**
Behold, a Fiddle: <http://jsfiddle.net/CfYRv/>