Hi all – any thoughts?

Sorted it – did this:

				<main class='content <?php avia_layout_class( 'content' ); ?> units' <?php avia_markup_helper( array( 'context' => 'content', 'post_type' => 'post' ) );?>>
				<div class="archive-header" style="text-align: center;"><h1><?php post_type_archive_title(); ?><?php single_term_title(); ?></h1></div>

Actually on the z-index I may need some help in inserting it into our existing code. Thanks

Dominic

Plus, is there a way to get the tooltip to sit above the hotspots? At the moment, a higher numbers hotspot appears on top of the activated tooltip.

Hi Mike – fixed it. I had an old bit of Javascript hiding in an enqueued file that was trying to do the same thing and broke it!

• This reply was modified 1 year, 2 months ago by domchocolate.

Hi Mike thought I’d fixed it but I haven’t… ignore this message/edit

• This reply was modified 1 year, 2 months ago by domchocolate.

Thanks, Mike

Close, but no cigar for me yet. If you check this page: https://oxwedev.wpengine.com/this-is-a-map-test/ – password below – you’ll see the hotspots appear and disappear quickly. I think this is because the code is clashing with:

// custom script: hide the tooltip on the tab click
function ava_custom_script_hide_tooltip()
{
    ?>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('.av-tab-section-tab-title-container').on('click', function(event) {
                    $('.avia-tooltip').css({
                        opacity: 0,
                        display: 'none'
                    });
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_hide_tooltip', 9999 );

This code hides any visible tooltips when we click on a section tab – very important.

The clash is causing:
1. The clickable hotspots to open and close really quickly, and;
2. The clickable hotspots to stop working at all if you navigate away from the tab and back again.

Is there a way to tweak this/these code/s so that they don’t clash?

I really appreciate any help you can provide.

Dominic

Hi, further to above – I got it HALF working with the following code and setting the tooltip as – always

//Clickable hotspots on ALWAYS
(function( $ ) {
	 $(window).ready(function() {
               jQuery('.avia-tooltip').hide();	
	       $('.av-image-hotspot_inner').on( "click", function(e) {
		      jQuery(this).siblings('.avia-tooltip').toggle('slow');
	        });
         });
})(jQuery);

However, the tooltip doesn’t close/hide when I click on another hotspot.

See example: https://oxwedev.wpengine.com/this-is-a-map-test/
Username and password below.

Thanks in advance

Dominic

Hi, thinking about this further – would it fix it if, for example:

<a href="#5" class="goto-slide" role="link" style="transition: none 0s ease 0s;">5</a>

was changed to

<a href="#5" class="goto-slide" role="button" style="transition: none 0s ease 0s;">5</a>

and/or adding

<a href="#5" class="goto-slide" role="button" aria-hidden="true" style="transition: none 0s ease 0s;">5</a>

I also found this:

Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screen reader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what’s missing with a combination of roles like button, listbox, or tablist, and properties like aria-required or aria-posinset to provide further clues as to functionality.

• This reply was modified 1 year, 3 months ago by domchocolate.

Thanks, Yigit. I thought it might be.