HTML5 Tooltips  

Got some great idea or a feature request? Post it here and discuss it.
no avatar
New member
Topic author
Posts: 6
Likes: 0 post
Liked in: 0 post
Joined: Tue Oct 16, 2012 4:16 pm
Location: Chattanooga, TN

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 />:


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.
Dean A. Scott, mfa
Owner/Lead Artist,
chrusion | FX

Who is online

Users browsing this forum: No registered users and 2 guests