You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Thursday, November 27th 2014, 3:13pm

Html5 tooltip always visible

Is it possible ho make html5 tooltips always visible?
I'm building an html5 only tour (with panotour pro) where there are a lot of country flag hotspots. My average user won't able to recognize ALL the flags, so I need to show the flag (hotspot icon) and the country name (the tooltip?).
This is a multilanguage tour so I'm trying to find a way to avoid putting the name of the country in the icon (I should create an "Italy" icon for english, "Italia" for italian and "Italie" for french, and so on)

My idea is to create a text layer for each country. Always visible, and "moving" as the view changes, somehow following "its" hotspot. But I don't know hot to make it work...
Looking at the code generated by Panotour, related to tooltips, I found
out that the tooltip layer is positioned in relation to mouse position. I think I have to calculate x and y position starting from hotspot.ath / atv view.hlookat / vlookat. Does it make any sense???

This is a scratch for my solution... can you help me please?

Source code

1
2
3
4
5
6
<layer name="ItalyTooltip" [...] visible="true" html="ITALY" />
<events onviewchange="moveTooltip();" />
<action name="moveTooltip">
	set(layer[get(ItalyTooltip)].x, ???);
	set(layer[get(ItalyTooltip)].y, ???);
</action>

Umalo

Professional

Posts: 1,048

Location: Osijek, Croatia, EU

  • Send private message

2

Thursday, November 27th 2014, 3:22pm

Yes it is possible. Easiest is to put tooltip as children from that hotspot and that way you don't need to calculate anything. You also need to have as many tooltip layers as many hostpots you want to display tooltip all the time (1:1 relation)

3

Thursday, November 27th 2014, 3:33pm

Easiest and perfect *__* Thank you SO MUCH Umalo!

4

Tuesday, July 7th 2015, 1:35pm

Quoted

Yes it is possible. Easiest is to put tooltip as children from that hotspot and that way you don't need to calculate anything. You also need to have as many tooltip layers as many hostpots you want to display tooltip all the time (1:1 relation)
What do you mean by adding tooltip as child of the hotspot? Currently I have :

Source code

1
  <hotspot name="spotpoint5085" ath="30.310442" atv="-5.254237" visible="true"  style="IconDefaultPointSpotStyle5"  descriptionid="" handcursor="false"  tooltip="spotpoint5085_tooltip"           />



and the style:

Source code

1
  <style name="IconDefaultPointSpotStyle5" url="%FIRSTXML%/spots/info_rambam_st_user_defaultpoint4.png"  visible="true" onhover="onhoverIconDefaultPointSpotStyle5"  onover="onoverIconDefaultPointSpotStyle5"	 onout="onoutIconDefaultPointSpotStyle5"         />



The tooltip is shown only onHover (which make sense) but I can't figure how to set it visibile at the hotspot position all the time.

Umalo

Professional

Posts: 1,048

Location: Osijek, Croatia, EU

  • Send private message

5

Tuesday, July 7th 2015, 2:27pm

Using this http://krpano.com/forum/wbb/index.php?pa…50929#post50929 tutorial from Klaus you can have something like this:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<scene name="scene_kidroom2" title="kidroom2" onstart="" thumburl="panos/kidroom2.tiles/thumb.jpg" lat="" lng="" heading="">
		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto"/>
		<preview url="panos/kidroom2.tiles/preview.jpg"/>
		<image>
			<cube url="panos/kidroom2.tiles/pano_%s.jpg"/>
			<mobile>
				<cube url="panos/kidroom2.tiles/mobile_%s.jpg"/>
			</mobile>
		</image>		
		<hotspot name="spot1" style="your_hotspotstyle" ath="-30.441" atv="14.181" tooltip="tooltip 1"/>
		<hotspot name="spot2" style="your_hotspotstyle" ath="-48.224" atv="12.630" tooltip="tooltip 2"/>
	</scene>	
		
  <style name="your_hotspotstyle" url="%SWFPATH%/skin/vtourskin_hotspot.png" scale="0.5" edge="top" oy="0" distorted="false" onloaded="add_all_the_time_tooltip();" />

  <action name="add_all_the_time_tooltip">
    txtadd(tooltipname, 'tooltip_', get(name));
    addplugin(get(tooltipname)); txtadd(plugin[get(tooltipname)].parent, 'hotspot[',get(name),']');
    set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
    set(plugin[get(tooltipname)].align,top); set(plugin[get(tooltipname)].edge,bottom);
    set(plugin[get(tooltipname)].x,0); set(plugin[get(tooltipname)].y,0);
    set(plugin[get(tooltipname)].width,200); set(plugin[get(tooltipname)].autoheight,true);
    set(plugin[get(tooltipname)].background,false); set(plugin[get(tooltipname)].border,false);
    set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;');
    set(plugin[get(tooltipname)].textshadow,1); set(plugin[get(tooltipname)].textshadowrange,6.0); set(plugin[get(tooltipname)].textshadowangle,90);
    copy(plugin[get(tooltipname)].html,hotspot[get(name)].tooltip);
    set(plugin[get(tooltipname)].enabled,false);
  </action>

6

Wednesday, July 8th 2015, 10:45am

Thanks for the fast response Umalo.
I'm getting this error when implementing your code:

Quoted

WARNING: Locally not trusted - External Interface NOT available!
and then alot of another warnings and few errors all with error number 2060.
The issue seems to be related to to security options.
Any idea?

EDIT:
Issue solved by setting security setting of the flash player - follow this link.
Your code works perfectly, thanks alot!

This post has been edited 3 times, last edit by "Yuval" (Jul 8th 2015, 12:38pm)


7

Thursday, July 16th 2015, 2:54pm

Is it possible to show the text beneath the image instead of top of it?

Umalo

Professional

Posts: 1,048

Location: Osijek, Croatia, EU

  • Send private message

8

Thursday, July 16th 2015, 4:29pm

add this line in code from above:

Source code

1
copy(plugin[get(tooltipname)].oy,60);

9

Thursday, July 16th 2015, 5:20pm

I've added it and it lookes like this:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<action name="add_all_the_time_tooltip">
 txtadd(tooltipname, 'tooltip_', get(name));
 addplugin(get(tooltipname)); txtadd(plugin[get(tooltipname)].parent, 'hotspot[',get(name),']');
 set(plugin[get(tooltipname)].url,'%SWFPATH%/graphics/textfield.swf');
 set(plugin[get(tooltipname)].align,top); set(plugin[get(tooltipname)].edge,bottom);
 set(plugin[get(tooltipname)].x,0); set(plugin[get(tooltipname)].y,0);
 set(plugin[get(tooltipname)].width,200); set(plugin[get(tooltipname)].autoheight,true);
 set(plugin[get(tooltipname)].background,false); set(plugin[get(tooltipname)].border,false);
 set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;');
 set(plugin[get(tooltipname)].textshadow,1); set(plugin[get(tooltipname)].textshadowrange,6.0); set(plugin[get(tooltipname)].textshadowangle,90);
 copy(plugin[get(tooltipname)].html,hotspot[get(name)].tooltip);
 set(plugin[get(tooltipname)].enabled,false);
 copy(plugin[get(tooltipname)].oy,60);
 </action>


But it doesn't work...

Umalo

Professional

Posts: 1,048

Location: Osijek, Croatia, EU

  • Send private message

10

Thursday, July 16th 2015, 6:52pm

Yes you are right, now I tried in the code and it should be:

Source code

1
set(plugin[get(tooltipname)].oy,60);

Maybe easier to use:

Source code

1
set(plugin[get(tooltipname)].align,bottom); set(plugin[get(tooltipname)].edge,top);

to make toolips below hotspot without tweaking oy attribute.

11

Thursday, July 16th 2015, 6:59pm

Works great, thanks!

12

Tuesday, July 21st 2015, 1:57pm

Sorry for digging with the tooltip, but I would like to maximize it's abilities.
I have 2 issues to fix, the first is how to define the tooltip text as RTL instead of default LTR?
When the text is RTL i have "," at the start instead of the end.

Another one is that I have a rectangle as the tooltip background. Is it possible to change that rectangle color and opacity?

Umalo

Professional

Posts: 1,048

Location: Osijek, Croatia, EU

  • Send private message

13

Tuesday, July 21st 2015, 5:24pm

1. Is your text in Arabic or other rtl letters? Stored in UTL8 they should be automaticaly aligned rtl (as I remember in one old project)
2. Tooltip is layer as child of hotspots. If your hotspot is image or poligonal hotspot type you should be able to define its color and opacity. Read here: http://krpano.com/docu/xml/#hotspot.fillcolor

14

Wednesday, July 22nd 2015, 11:16am

The RTL issue is fixed, but I'm still unable to set backgroup specific to the tooltip text.
I've tried

Source code

1
set(plugin[get(tooltipname)].fillcolor,0xD0D0D0);
inside the action of my style but it doesnt change anything...

Umalo

Professional

Posts: 1,048

Location: Osijek, Croatia, EU

  • Send private message

15

Wednesday, July 22nd 2015, 11:05pm

Tooltip is layer using textfield plugin. If you want to change color of it than you have to use: http://krpano.com/plugins/textfield/#background

Similar threads