HTML5 Tooltips

[chrusion]

HTML5 Tooltips

by chrusion » Mon Apr 08, 2013 1:14 am

Now that KRpano 1.16.1 is out (would have been 1.08.16), we can finally have tooltips in HTML5 mode, although NOT on touch/mobile devices due to no mouse over event.

The code to do so is simple, but VERY tedius to copy/paste/edit manually each virtualtopurXX.xml file.

It is...

ADD the following to each <hotspot />:

style="tooltip" tooltip="SAME AS USER DEFINED DESCRIPTION FOR SHOWTEXT()"

-----------------------------------------------------------------------------------
ADD the following to the end of the block of hotspots:

<!-- the 'tooltip' style - show tooltip textfield -->
<style name="tooltip" onover="copy(layer[tooltip].html, tooltip); set(layer[tooltip].visible, true); copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey);" onout="set(layer[tooltip].visible,false); copy(layer[tooltip].html, "");"/>

<!-- the 'tooltip' textfield -->
<layer name="tooltip" keep="true" url="plugins/textfield.swf" parent="STAGE" visible="false" alpha="1" enabled="false" align="USER DEFINED POSITION (eg. lefttop)" edge="USER DEFINE POSITION (eg. bottom)" ox="USER DEFINED PIXEL OFFSET INT" oy="USER DEFINED PIXEL OFFSET INT" width="USER DEFINED PIXEL INT" autoheight="USER DEFINED (true/false) BOOLEAN" background="USER DEFINED BOOLEAN" backgroundcolor="USER DEFINED 0xHEX" backgroundalpha="USER DEFINED FLOAT (0 to 1)" border="USER DEFINED (true/false) BOOLEAN" roundedge="USER DEFINED PIXEL INT" shadow="USER DEFINED (0/1) BOOLEAN" textshadow="USER DEFINED (0/1) BOOLEAN" textshadowrange="USER DEFINED INT" textshadowangle="USER DEFINED INT" textshadowcolor="USER DEFINED 0xHEX" textshadowalpha="USER DEFINED FLOAT (0 to 1)" css="USER DEFINED STRING (text-align:center; color:#fff; font-family:Arial; font-weight:bold; font-size:16px;)" html=NULL />

There are other options that can be programatically added to PTP, such as having the tooltip follow the cursor by adding:

asyncloop(hovering, copy(layer[tooltip].x,mouse.stagex); copy(layer[tooltip].y,mouse.stagey);

to the Style onover string (fading in and out is easy to add as an option as well)

Last edited by chrusion on Wed Apr 10, 2013 4:22 am, edited 1 time in total.