title: Popover shows when hovering inner iframe
body: <p>I have a small issue with a series of non-bootstrap popover made by me that contains social buttons each one and have to be shown when hovering or clicking an element that contains the popover. </p>
  
  <p>The html of one of the items is like this:</p>
  
  <pre><code>&lt;li class="social__list-item  js-show-popover"&gt;
      &lt;a href="" class="social__link  footer-social__link  footer-social__link--googleplus"&gt;&lt;/a&gt;
      &lt;div class="media  social__popover"&gt;
          &lt;div class="media-left"&gt;
              &lt;span class="popover__img"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="media-body"&gt;
              &lt;p class="popover__title"&gt;Síguenos en Google+&lt;/p&gt;
              &lt;div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I am hiding <code>.social__popover</code> with <code>opacity: 0;</code> and <code>visibility: hidden;</code> and turn visible with jquery.</p>
  
  <p>Everything works as expected, the problem is when you hover over the area where the iframe embedded buttons are when the popover is hidden and they make the popover to show.</p>
  
  <p>Using display:none on the popover solves the issue, but it makes to break the rendering of some of those embedded buttons (mainly google buttons)</p>
  
  <p>I prepared a Jsfiddle example: <a href="https://jsfiddle.net/victorRGS/dcv2g973/1/" rel="nofollow">https://jsfiddle.net/victorRGS/dcv2g973/1/</a></p>
  
  <p>It seems that we can live with it but I would like to work as expected, also the area of the facebook widget (not working in the example, idk why) is quite bigger and this one could be a real annoyance.</p>
  
  <p>Any help will be welcome</p>