Tooltip works on computer but not working on iphone...

  • Hi,

    In my panoramatour the tooltips are working fine on my computer but not on my iphone, please advice. *confused* On my phone I get a xml error.


    Thanks,

    Marcel

    http://360rotterdam.nl/test/tour.html


    ------XML------

    <krpano version="1.16" title="" onstart="startup();">

    <include url="skin/vtourskin.xml" />


    - <!--

    Automatic rotation / moving / zooming when there is no user-interaction in the pano

    -->

    <autorotate enabled="true" waittime="2" speed="3.0" />


    - <!--

    End Automatic rotation / moving / zooming when there is no user-interaction in the pano

    -->

    a container layer with the default navigation buttons
    -->
    <layer name="buttons" keep="true" type="container" align="bottom" width="240" height="40" y="10">
    <layer name="in" style="button|tooltip" tooltip="Zoom In" x="0" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);"/>
    <layer name="out" style="button|tooltip" tooltip="Zoom Out" x="40" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);"/>
    <layer name="left" style="button|tooltip" tooltip="Look Left" x="80" crop="0|0|40|40" onovercrop="0|40|40|40" ondowncrop="0|80|40|40" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);"/>
    <layer name="right" style="button|tooltip" tooltip="Look Right" x="120" crop="40|0|40|40" onovercrop="40|40|40|40" ondowncrop="40|80|40|40" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);"/>
    <layer name="up" style="button|tooltip" tooltip="Look Up" x="160" crop="80|0|40|40" onovercrop="80|40|40|40" ondowncrop="80|80|40|40" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);"/>
    <layer name="down" style="button|tooltip" tooltip="Look Down" x="200" crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);"/>
    </layer>
    <!--
    when fullscreen is supported - add fullscreen buttons and make the container larger
    -->
    <layer name="buttons" width="280" devices="fullscreensupport">
    <layer name="openfs" style="button|tooltip" tooltip="Enter Fullscreen Mode" x="240" crop="280|0|40|40" onovercrop="280|40|40|40" ondowncrop="280|80|40|40" onclick="set(fullscreen,true);" visible="true"/>
    <layer name="closefs" style="button|tooltip" tooltip="Exit Fullscreen Mode" x="240" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onclick="set(fullscreen,false);" visible="false"/>
    </layer>
    <!--
    <plugin name="data" firstPanoHasBeenPlayed="false" introImageHasBeenPlayed="false" keep="true"/>
    <!--
    events: set the custom cursor on start and fullscreen events for button changes
    -->
    <events name="skin_events" onmousedown="set(autorotate.waittime, 5); delayedcall(1, set(event.onclick,null));" onenterfullscreen=" set(plugin[skin_btn_openfs].visible,false); set(plugin[skin_btn_closefs].visible,true); if(isandroid, set(plugin[android_skin_btn_openfs].visible,false); set(plugin[android_skin_btn_closefs].visible,true); );" onexitfullscreen=" set(plugin[skin_btn_openfs].visible,true); set(plugin[skin_btn_closefs].visible,false); if(isandroid, set(plugin[android_skin_btn_openfs].visible,true); set(plugin[android_skin_btn_closefs].visible,false); );" keep="true"/>
    <events name="scene_events" keep="true" onxmlcomplete="firstpanoramaanimation();"/>

    <action name="firstpanoramaanimation">
    <!-- disable animation on flat pano -->
    if(image.type EQ CYLINDER, set(plugin[data].firstPanoHasBeenPlayed,true); ); if(plugin[data].firstPanoHasBeenPlayed==false, copy(current_hlookat, view.hlookat); sub(min_current_hlookat, current_hlookat, 120); copy(view.hlookat, min_current_hlookat); lookto(get(current_hlookat),get(view.vlookat),get(view.fov),smooth(50,50,50),true,true); set(plugin[data].firstPanoHasBeenPlayed,true); );
    </action>

    <action name="startup">if(startscene === null, copy(startscene,scene[0].name)); loadscene(get(startscene), null, MERGE);</action>


    -->
    <!-- set optional skin logo url -->
    <layer name="skin_logo" url="" scale="0.25" opened_onclick="openurl('...',_blank);" />


    <action name="startup">
    if(startscene === null, copy(startscene,scene[0].name));
    loadscene(get(startscene), null, MERGE);
    </action>


    <scene name="scene_exterieur_sphere" title="exterieur_sphere" onstart="" thumburl="panos/exterieur_sphere.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="-10.273" vlookat="0.198" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

    <preview url="panos/exterieur_sphere.tiles/preview.jpg" />

    <image type="CUBE" multires="true" tilesize="512" progressive="false">
    <level tiledimagewidth="1910" tiledimageheight="1910">
    <cube url="panos/exterieur_sphere.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="955" tiledimageheight="955">
    <cube url="panos/exterieur_sphere.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="512" tiledimageheight="512">
    <cube url="panos/exterieur_sphere.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
    </level>
    <mobile>
    <cube url="panos/exterieur_sphere.tiles/mobile_%s.jpg" />
    </mobile>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" url="skin/vtourskin_hotspot.png" style="skin_hotspotstyle|tooltip" tooltip="Ga naar binnen | Go inside" ath="-14.336" atv="-3.159" linkedscene="scene_hal_sphere" />

    </scene>

    <scene name="scene_hal_sphere" title="hal_sphere" onstart="" thumburl="panos/hal_sphere.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="3.826" vlookat="0.350" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

    <preview url="panos/hal_sphere.tiles/preview.jpg" />

    <image type="CUBE" multires="true" tilesize="512" progressive="false">
    <level tiledimagewidth="1910" tiledimageheight="1910">
    <cube url="panos/hal_sphere.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="955" tiledimageheight="955">
    <cube url="panos/hal_sphere.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="512" tiledimageheight="512">
    <cube url="panos/hal_sphere.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
    </level>
    <mobile>
    <cube url="panos/hal_sphere.tiles/mobile_%s.jpg" />
    </mobile>
    </image>

    <!-- place your scene hotspots here -->

    <hotspot name="spot2" url="skin/vtourskin_hotspot.png" style="skin_hotspotstyle|tooltip" tooltip="Ga naar buiten | Go outside" ath="-1.723" atv="3.810" linkedscene="scene_exterieur_sphere" />
    <hotspot name="spot3" url="skin/vtourskin_hotspot.png" style="skin_hotspotstyle|tooltip" tooltip="Naar de kamer | To the room" ath="-71.403" atv="-0.419" linkedscene="scene_kamer_sphere" />

    </scene>

    <scene name="scene_kamer_sphere" title="kamer_sphere" onstart="" thumburl="panos/kamer_sphere.tiles/thumb.jpg" lat="" lng="" heading="">

    <view hlookat="122.509" vlookat="-0.042" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

    <preview url="panos/kamer_sphere.tiles/preview.jpg" />

    <image type="CUBE" multires="true" tilesize="512" progressive="false">
    <level tiledimagewidth="1910" tiledimageheight="1910">
    <cube url="panos/kamer_sphere.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="955" tiledimageheight="955">
    <cube url="panos/kamer_sphere.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
    </level>
    <level tiledimagewidth="512" tiledimageheight="512">
    <cube url="panos/kamer_sphere.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
    </level>
    <mobile>
    <cube url="panos/kamer_sphere.tiles/mobile_%s.jpg" />
    </mobile>
    </image>

    <!-- place your scene hotspots here -->
    <hotspot name="spot1" url="skin/vtourskin_hotspot.png" style="skin_hotspotstyle|tooltip" tooltip="Naar de hal | To the Hall" ath="0.344" atv="6.003" linkedscene="scene_hal_sphere" />

    </scene>


    <!--
    the 'tooltip' style - show tooltip textfield and update positions as long as hovering
    -->
    <style name="tooltip" onover="copy(layer[tooltip].html, tooltip); set(layer[tooltip].visible, true); tween(layer[tooltip].alpha, 1.0, 0.5); asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );" onout="tween(layer[tooltip].alpha, 0.0, 0.25, default, set(layer[tooltip].visible,false), copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey); );"/>
    <!-- the 'tooltip' textfield -->
    <layer name="tooltip" keep="true" url="%SWFPATH%/plugins/textfield.swf" parent="STAGE" visible="false" alpha="0" enabled="false" align="lefttop" edge="bottom" oy="-2" autowidth="true" autoheight="true" background="false" backgroundcolor="0xFFFFFF" backgroundalpha="1.0" border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0" roundedge="0" shadow="0.0" shadowrange="4.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="1.0" textshadow="1" textshadowrange="6.0" textshadowangle="90" textshadowcolor="0x000000" textshadowalpha="1.0" css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:14px;" html=""/>
    </krpano>

  • Hi,

    there are no over/out events on touch devices.

    If you want tooltips for touch too, try adding custom ondown/onup events.

    e.g. extend the current tooltip style in your code with such ondown/onup events (simply calls to the onover/onout events):

    Code
    <style name="tooltip"
      ...
      ondown="onover();"
      onup="onout();" 
    />

    Best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!