Sorry if I should open another topic instead of posting in this same thread.. But I just wanted to know if I could nest content elements?

Instead of using the icon tooltip, is there anyway I can create a toggle item within a tab? Do let me know if this is possible.

Thanks!

Ok

the Shortcode is outputting the correct custom colors

DEFAULT EXAMPLE

[av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-bottom' tooltip_width='av-tt-default-width' tooltip_style='main_color av-tooltip-shadow' link='page,149' hotspot_color='' custom_bg='' custom_font='' custom_pulse='' hotspot_pos='48.8,80.4']
<p>Tool tip text here</p>
[/av_image_spot]

CUSTOM COLORS EXAMPLE

[av_image_spot tooltip_pos='av-tt-pos-left av-tt-align-centered' tooltip_width='av-tt-default-width' tooltip_style='main_color' link='manually,http://#url link here' hotspot_color='custom' custom_bg='#00472e' custom_font='#ffffff' custom_pulse='#00472e' hotspot_pos='88.8,86.8']
<p>Tool tip text here</p>
[/av_image_spot]

However the shortcode is not inserting the custom style HTML CSS code for the custom colors in the FONT COLOR or BACKGROUND COLOR

<div class="av-image-hotspot av-perma-tooltip av-display-hotspot" data-avia-tooltip-position="left" data-avia-tooltip-alignment="centered" data-avia-tooltip-class="av-tt-default-width av-tt-pos-left av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tt-hotspot" data-avia-tooltip="<h3><a title=&quot; &quot; href=&quot;http://#url link here&quot; target=&quot;_blank&quot;>Download our Product Brochure</a></h3>
" style="top: 88.8%; left: 86.8%; "><a href="http://#url link here" class="av-image-hotspot_inner" style="background-color: #00472e; color: #ffffff;">6</a><div class="av-image-hotspot-pulse" style="background-color:#00472e;"></div><div class="avia-tooltip avia-tt av-tt-default-width av-tt-pos-left av-tt-align-centered av-mobile-fallback-active av-permanent-tooltip-single main_color av-tt-hotspot" style="top: -37px; left: -140px; display: block; opacity: 1;"><div class="inner_tooltip"><h3><a title="" href="http://#url link here" target="_blank">Download our Product Brochure</a></h3></div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div></div>

Above we can see that the custom colour has been inserted for the hotspot

<div class="av-image-hotspot-pulse" style="background-color:#00472e;"></div>

But not for the other elements

Hi Yigit,
we need to use the “Show thumbnails and display post title by tooltip”, we just want to edit the thumbnail size.

Best
Superhub

Hi Yigit,

That worked and I added the following to css:

/* Header Social Share Box Adjustment */
#header .av-social-sharing-box { z-index: 999; position: absolute; bottom: 5px; }
#header .av-share-box .avia-related-tooltip { display: none !important; }

/* Hide Header Social Share Box for Mobile Devices */
@media only screen and (max-width: 767px) {
#header .av-social-sharing-box { display: none; }
}

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

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