Víctor Bonilla Víctor Bonilla - 2 months ago 9
CSS Question

Popover shows when hovering inner iframe

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.

The html of one of the items is like this:

<li class="social__list-item js-show-popover">
<a href="" class="social__link footer-social__link footer-social__link--googleplus"></a>
<div class="media social__popover">
<div class="media-left">
<span class="popover__img"></span>
</div>
<div class="media-body">
<p class="popover__title">Síguenos en Google+</p>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"></div>
</div>
</div>
</li>


I am hiding
.social__popover
with
opacity: 0;
and
visibility: hidden;
and turn visible with jquery.

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.

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)

I prepared a Jsfiddle example: https://jsfiddle.net/victorRGS/dcv2g973/1/

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.

Any help will be welcome

Answer

If I am understanding your problem right, you should try this.

Adjust pointer-events:none; to the popover when they are hidden, and set back to auto when you hover the icon.

See example: https://jsfiddle.net/y6Ldjuwd/

Is this what you want?