-
Posts
-
Hi guys, first off, thanks for the hard work. Enfold is my favorite theme. :)
I have a quick question about z-index for content inside of the avia tabs shortcode. I’m trying to use Tippy to create pop-up tooltips (containing images, video, links, more information etc.) for text located inside of avia tabs. Unfortunately these are always cut off by the tab’s overflow:hidden. Rather than modifying the overflow , I’ve tried every positioning and z-index configuration I can think of, to get tooltips to stack on top of the tabs, so tooltip content won’t be cut off. I just can’t seem to get it right (see example tab in the private link submitted below). I’ve tried about a dozen or so other tooltip plugins with the same result. Overflow, z-index, and positioning are defeating me. Could you please advise what I need to change in the css to make this work? I’m fairly desperate to have tooltips on my site and also need to layer information in tabs. It would be great if you could help me get these two elements playing nicely together! :]
Thanks in advance!
Hey cryscryb!
Thank you for using Enfold.
I’m sorry but we don’t provide support for any third party plugins but you can use the theme’s default tool tip system. Tool tip should be rendered outside the main container to prevent overflow properties from cutting off the tool tip area. Add this on functions.php:
function avf_text_tooltip() { ?> <script> (function($){ $(window).load(function() { //creates text icon tooltip new $.AviaTooltip({'class': "avia-tooltip avia-text-tooltip", data: "avia-text-tooltip", delay:0, scope: "body"}); }); })(jQuery); </script> <?php } add_filter('wp_footer', 'avf_text_tooltip', 10);Add this on the tab content, make sure you’re on text / html editor mode:
<a class="avia-text-tooltip" href="#" data-avia-text-tooltip="TOOL TIP HERE">Tooltip</a>Everything with the class avia-text-tooltip and the attribute data-avia-text-tooltip will have a tool tip. You can add the tip content inside the data-avia-text-tooltip attribute.
Cheers!
IsmaelThanks Ismael, that works well for plain-text tooltips. The tips I’m creating primarily however contain other media (video and links) coupled with text explanations for academic reference. These don’t work inside of the regular tooltips. I’ll keep trying though until I find a good solution or eliminate the tabs altogether. Just thought there might be a simple css fix I was overlooking. I appreciate the help and the new reusable text tooltip though :)
Hey!
Thank you for the update.
Unfortunately, this particular request or modification is more than what we can offer as a support team. This task is beyond the scope of support and is not a theme related issue. Please hire a freelance developer to configure the theme structure or find a third party plugin that coincide with the theme. For further modifications, please visit Envato Studio or Werkpress.
If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries. Thank you for your understanding.
Best regards,
IsmaelThanks Ismael as I stated above, since there isn’t a simple CSS tweak I’d figure it out on my own, or use a different method. My intent above wasn’t to ask for further (unsupported) support since I’m aware that this is beyond the scope of the theme. I thought I’d simply post a final update and say thanks for the extension of the regular tooltip use which I’ve already began to implement and play with. It’s pretty cool.
One suggestion, a channel or discussion area on the support blog where users can have non-help-ticketed discussions and advice would be nice. :)
PS. Turns out the latest Tippy version has an option to reposition tooltips by specifying a parent css class to house it. Once I updated and moved it outside of tab section, I was able to make it work without being cut off. It was the only plugin I could find (out of 20+ tooltip plugins) that had this option available. Thought someone else might find this helpful.
- The topic ‘Tab shortcode z-index issue with popup/tooltip plugins and media’ is closed to new replies.