Question: I am working from a continuation of the project that I have started [here](https://stackoverflow.com/questions/25733259/how-to-prepend-html-into-on-page-element-from-html-onclick-event).

Basically, this is dynamically creating tooltip popups in a relative position to a link when clicked. What I now need to do is have them close when a click is registered anywhere on the page except for an element with the class of "tooltip-dialog". I would like the click to remove all instances of elements with the class of "dialog-anchor" from the DOM. In addition to this, I would like to have only one tooltip popup be allowed active at a time.

I played around with this for several hours yesterday evening, but am unsure of how to approach implementing the intended functionality. I would really appreciate if someone would be willing to take the time to explain to me how to go about this. 

Here is the code thus far. Currently, This only generates the new tooltip on click.

```
$(function() { //jquery document.ready

  $('a.tooltip').on('click', function(e) {
    var $this = $(this);
    e.preventDefault();

    $this.prepend('<div class="dialog-anchor"><div class="dialog-container"><div class="tooltip-dialog"><h4>' + $this.data('title') + '</h4><p>' + $this.data('content') + '</p></div><div class="bg"></div></div></div>');

  });

});

```

Here's what the on page HTML looks like for the links prior to firing the tooltip popup:

```
<a class="tooltip top" data-title="This is a tooltip" data-content="blah blah blah blah blah blah blah blah blah"></a>

```

Answer: 
So you have a relatively-positioned `.dialog-anchor` element:

```
$this.prepend('<div class="dialog-anchor">...</div>');

```

Add an empty `dialog-overlay` element:

```
$this.prepend('<div class="dialog-overlay"></div>');
$this.prepend('<div class="dialog-anchor">...</div>');

```

Now, in your CSS:

```
.dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0,0,0,1);
}

.dialog-anchor {
  z-index: 3;
}

```

The dialog box will be above your overlay. The overlay is a transparent layer over your entire screen. Add a click-handler to the overlay:

```
var $overlay = $('<div class="dialog-overlay"></div>');
var $anchor = $('<div class="dialog-anchor">...</div>');
$overlay.on('click', function() {
  $anchor.remove();
});
$this.prepend($overlay);
$this.prepend($anchor);

```

This solution allows you to do other effects like dimming the rest of the page, like this:

```
background: rgba(0,0,0,0.6);

```
Try using the `blur()` jQuery event. It simply does something when the mouse is clicked anywhere outside the element, or even key presses like TAB key <http://api.jquery.com/blur/>

```
 $(".dialog-anchor").not(".tooltip-dialog").blur(function(){
 //Do something
 });

```