Search code examples
javascriptjquerymobile-safariimagemapqtip2

How to make the image map clickable on mobile-safari?

I'm using jQuery and qTip2 to make Geo information on an image map visible. You can see the demo here on JSFiddle | Fiddle Screen result

On Desktop Browsers everything works fine. on-hover you see the tooltip and on-click you go to the URL defined by href tag.

But on mobile safari (ipad/iphone) it is impossible to get the link to the URL. Every time you click on the map it is like you hover on pc, but never a click.

The image is created with standard html:

<img src="https://i.sstatic.net/6z2Z9.png" usemap="mapname">​

also the map is created with standard html but with additional attribute tooltip(1):

<map name="mapname">
<area shape="poly"  href="?content=meteo&abm=ALL" tooltip="ABM Alland"   coords="664,243, 662,240, 664,237, 667,235, 669,232, 671,229, 671,225, 669,222, 669,214, 672,213, 673,227, 676,228, 679,231, 685,231, 692,232, 695,231, 697,228, 700,227, 703,228, 704,234, 705,241, 703,244, 700,246, 697,247, 694,249, 691,251, 688,253, 683,254, 680,253, 677,252, 672,249, 669,247, 664,243"></map>

The jQuery is very tiny with(2):

$(document).ready(function() {
    $('area').each(function() {
        $(this).qtip({
            content: { text: $(this).attr('tooltip') },
            position: {
                my: 'bottom left',
                target: 'mouse',
                viewport: $(window)
            },
            hide: { fixed: true },
            style: { classes: 'ui-tooltip-tipsy ui-tooltip-shadow'}
        });
    });
});​

So how could i solve this problem?
 
 
 

(1) I know this attribute should be data-tooltip. this will be changed soon.

(2) Based on the imagemap demo

Solution

  • This is logical. Ever tried hovering on a touchscreen? :-D

    Since mobile devices lack the ability to hover, you need to adapt the way you are presenting your data, to fully support them.

    1. For mobile device users, you need to make absolutely clear where a :hover action on desktop browsers would take place. Make the places "pop out of the map", so they know without hovering, where to retrieve information.
    2. You need to substitute every :hover action with an adequate touchscreen action. For example provide the tooltips on tap and put the Link inside the tooltip to compensate for the missing hover action.
    3. In return you could make use of "touchscreen-only" interactions to compensate.

    A startingpoint on how to adapt you webcontent for mobile devices can be found in Apples Developer Library. (Especially §5 of this article).