title: Fadeout the background when Bootstrap popover is open
body: <p>I have a page with a few Bootstrap Popovers which open on hover. In order to add emphasis to the content on the popover, I am trying to fadeout the background when the reader hovers on the popover and remove the background fadeout when they click outside or move mouse cursor away from the popover.</p>
  
  <p>So far, I have been able to get the overlay effect on hover, but it does not trigger the popover.</p>
  
  <p><strong>JS:</strong>
  
      </p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $(".pop").hover(
            function(){$(".overlay").show();},
            function(){$(".overlay").hide();}
          );
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.overlay {
      background-color: rgba(0,0,0,0.5);
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 1200;
      display: none;
  }
  </code></pre>
  
  <p>Here's a Plunker of what I have been able to achieve. -> <a href="http://plnkr.co/edit/orXRUXnVqiGvpeqlnplY?p=preview" rel="nofollow">http://plnkr.co/edit/orXRUXnVqiGvpeqlnplY?p=preview</a></p>
  
  <p>The div with the overlay class is getting triggered but, seems very unstable. The overlay should get triggered but the popover must have a greater z-index and should be above it. Any help is appreciated. Thanks!</p>