Additional in Hotspot text when using Image with Hotspot

Just open the Debugger and uncomment my Custom-CSS which is:

.inner_tooltip {
margin: -20px 5px 5px 5px;
}

The heading moves down by those 20px. If You check the HTML-Code in the debugger for this Tooltip and remove the unnessecayr “<p></p>” right before the heading, then everything looks fine – so it’s definetely NOT the margin of the heading. Now let’s check the raw source code.You will find the following code for the Hotspot:

<div class='av-image-hotspot_inner' style=' '>4</div><div class='av-image-hotspot-pulse' ></div></div><div class='av-image-hotspot' data-avia-tooltip-position='bottom' data-avia-tooltip-alignment='right' data-avia-tooltip-class='av-tt-xlarge-width av-tt-pos-below av-tt-align-right av-mobile-fallback-active av-permanent-tooltip-single main_color av-tt-hotspot' data-avia-tooltip='</p><h4>Markante <strong>Einsätze</strong></h4><p>

Let’s translate the data-avia-tooltip’s beginning to real HTML:

</p><h4>Markante Einsätze</h4>

So, there is a closing paragraph on top of the heading – no idea, where You place the opening one. It’s of course the block we removed right before in the HTML-Debugger.

Do You now see the problem ? I suggest it has to do with the

ShortcodeHelper::avia_apply_autop($content)

which is used in the image_hotspots.php (511).

Regards,
Georg

Hi ISmael,

this is yet another workaround – I have a working one using CSS – I guess the main goal should be to correct the error, not to create workaround – right?

Georg

Hi Ismael,

thanks for that. Workaround does the trick actually. Elliotts workaround doesn’t limit on Image with Hotspots, so that the Tooltips everywhere are affected. So for those having the same problem:

.av-image-hotspot .inner_tooltip {
margin-top: -15px;
}

Georg