Tooltip Plugin tooltip.xml支持 Flash 与 HTML5

tooltip

一个简单的自定义的可用于任意layer或hotspot的文本提示插件。
可无缝运行于触摸屏设备上。
当触发插件时，文本提示展示在layer/hotspot的上方，相当于元素的一个固定位置。
需要Textfield插件与Abs插件（自带）。适用于1.17或以上版本。
该插件包含在Auto Thumbs插件中。

使用方法

嵌入插件的xml文件。

<include url="plugins/tooltip.xml" />

1	<include url="plugins/tooltip.xml" />

然后，在你希望显示文本提示增加一个名为”tooltip”的style，以及名为tooltip的属性，数值为所显示的文本。例如：

<layer name="some_layer"
       style="tooltip"
       tooltip="Tooltip text"
       tooltip_style="another_tooltip_style"
       tooltip_oy="2"
       ...  
       />

<layer name="some_layer"

style="tooltip"

tooltip="Tooltip text"

tooltip_style="another_tooltip_style"

tooltip_oy="2"

...

另外，你可以为每一个层增加属性tooltip_style 或 tooltip_oy 来覆盖全局tooltip设置。

在hotspots / layers的onloaded事件进行定义

可以使用onloaded事件对文本提示进行动态设置。

例如在hotspot上使用时，你或许希望能动态获取热点所链接的场景标题。这种情况下，我们就需要使用onloaded事件。我们也需要手动设置setup动作。

<hotspot name="hotspot_x"
         style="hotspot"
         linkedscene="scene_x"
         onloaded="copy(tooltip, scene[get(linkedscene)].title);
                   setup_tooltip(get(name));"
         ...
         />

<hotspot name="hotspot_x"

style="hotspot"

linkedscene="scene_x"

onloaded="copy(tooltip, scene[get(linkedscene)].title);

setup_tooltip(get(name));"

...

查看下面的源代码了解更多设置的方法。

设置

全局默认设置。

<settings name="tooltip"
          style="default_tooltip_style"
          oy="0"
          visible="true"
          />

<settings name="tooltip"

style="default_tooltip_style"

oy="0"

visible="true"

style
style标签的样式名字。
oy
相当于层的y坐标偏移。查看 layer[…].oy.
visible
控制插件的可见性。

样式设定

样式设置。

<style name="default_tooltip_style"
       font_color="FFFFFF"
       font_family="sans-serif"
       html5_font_family=""
       font_size="12"
       font_weight="normal"
       embeddedfonts="false"
       padding="6 8"
       roundedge="10"
       background="true"
       backgroundcolor="0x000000"
       backgroundalpha="1.0"
       border="false"
       bordercolor="0x000000"
       borderalpha="1.0"
       borderwidth="1.0"
       shadow="0.0"
       shadowrange="4.0"
       shadowangle="45"
       shadowcolor="0xFFFFFF"
       shadowalpha="1.0"
       textshadow="0.0"
       textshadowrange="4.0"
       textshadowangle="45"
       textshadowcolor="0x000000"
       textshadowalpha="1.0"
       />

font_color="FFFFFF"

font_family="sans-serif"

html5_font_family=""

font_size="12"

font_weight="normal"

embeddedfonts="false"

padding="6 8"

roundedge="10"

background="true"

backgroundcolor="0x000000"

backgroundalpha="1.0"

border="false"

bordercolor="0x000000"

borderalpha="1.0"

borderwidth="1.0"

shadow="0.0"

shadowrange="4.0"

shadowangle="45"

shadowcolor="0xFFFFFF"

shadowalpha="1.0"

textshadow="0.0"

textshadowrange="4.0"

textshadowangle="45"

textshadowcolor="0x000000"

textshadowalpha="1.0"

font_color
font_family
font_size
font_weight
字体样式选项
html5_font_family
可选，当使用HTML5时使用其它字体。

其它属性属于Textfield插件。可点击查看。

<krpano onstart="loadscene(scene_1, null, MERGE);">
  
  <include url="plugins/tooltip.xml" />
  
  <!-- Custom font embedding. See http://krpano.com/plugins/textfield/#embeddedflashfonts -->
  <plugin url="assets/open_sans.swf" preload="true" keep="true" devices="flash" />
  
  <!-- Global tooltip settings -->
  <settings name="tooltip"
    oy="-2"
    style="tooltip_style"
  />
  
  <!-- Tooltip styles -->
  <style name="tooltip_style"
    font_family="Open Sans"
    html5_font_family="Open Sans, sans-serif"
    font_size="13"
    font_weight="normal"
    font_color="FFFFFF"
    roundedge="5"
    padding="6 8"
    embeddedfonts="true"
    background="true" backgroundcolor="0x222222" backgroundalpha="1"
    shadow="0.001" shadowrange="4.0" shadowcolor="0xFFFFFF" shadowalpha=".3"
  />
  
  <style name="osx_tooltip_style"
    font_family="Helvetica Neue, sans-serif"
    font_size="14"
    font_weight="normal"
    font_color="333333"
    roundedge="6"
    padding="8 12"
    background="true" backgroundcolor="0xEEEEEE" backgroundalpha="1"
    shadow="0.001" shadowrange="6" shadowcolor="0x000000" shadowalpha=".3"
  />
  
  <!-- Layers -->
  <layer name="one" 
    style="square|tooltip" 
    tooltip="This is the default style"
    tooltip_style="default_tooltip_style"
    x="50"
  />
  
  <layer name="two" 
    style="square|tooltip" 
    tooltip="And this is the style defined in the tooltip settings"
    x="150"
  />

  <layer name="three" 
    style="square|tooltip" 
    tooltip="It uses a nice embedded font, Open Sans"
    x="250"
  />
  
  <layer name="four" 
    style="square|tooltip" 
    tooltip="This is a variation, using the tooltip_style attribute"
    tooltip_style="osx_tooltip_style"
    x="350"
  />

  <layer name="five" 
    style="square|tooltip" 
    tooltip="And this is the same style, but using the tooltip_oy attribute"
    tooltip_style="osx_tooltip_style"
    tooltip_oy="-8"
    x="450"
  />

  <style name="square" 
     type="container" 
     keep="true" 
     scalechildren="true" 
     maskchildren="false" 
     handcursor="false"
     bgalpha=".7" 
     bgcolor="0x000000" 
     bgcapture="true"
     align="left"
     y="25" 
     width="50" 
     height="50"
  />
  
  <style name="hotspot"
    url="assets/hotspot.png"
    alpha=".7"
    onclick="if(linkedscene, loadscene(get(linkedscene),null,MERGE,BLEND(.5)); );"
  />
  
  <!-- Scenes and hotspots -->
  <scene name="scene_1" title="This text comes from the linked scene title">
    <preview type="grid(cube,64,64,512,0xEEEEEE,0xDDDDDD,0xEEEEEE);" />
    
    <hotspot name="hotspot_a"
      style="hotspot|tooltip"
      ath="0"
      atv="-20"
      linkedscene="scene_2"
      tooltip="It works on hotspots too!"
      />    
  </scene>
  
  <scene name="scene_2" title="This title isn't loaded on the first scene hotspot tooltip">
    <preview type="grid(cube,64,64,512,0x444444,0x333333,0x444444);" />
    
    <hotspot name="hotspot_b"
      style="hotspot"
      alpha=".5"
      ath="10"
      atv="-20"
      linkedscene="scene_1"
      onloaded="setup_tooltip(get(name)); 
                copy(tooltip, scene[get(linkedscene)].title);"
      />
  </scene>

</krpano>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<settings name="tooltip"

oy="-2"

style="tooltip_style"

font_family="Open Sans"

html5_font_family="Open Sans, sans-serif"

font_size="13"

font_weight="normal"

font_color="FFFFFF"

roundedge="5"

padding="6 8"

embeddedfonts="true"

background="true" backgroundcolor="0x222222" backgroundalpha="1"

shadow="0.001" shadowrange="4.0" shadowcolor="0xFFFFFF" shadowalpha=".3"

font_family="Helvetica Neue, sans-serif"

font_size="14"

font_weight="normal"

font_color="333333"

roundedge="6"

padding="8 12"

background="true" backgroundcolor="0xEEEEEE" backgroundalpha="1"

shadow="0.001" shadowrange="6" shadowcolor="0x000000" shadowalpha=".3"

<layer name="one"

style="square|tooltip"

tooltip="This is the default style"

tooltip_style="default_tooltip_style"

x="50"

<layer name="two"

style="square|tooltip"

tooltip="And this is the style defined in the tooltip settings"

x="150"

<layer name="three"

style="square|tooltip"

tooltip="It uses a nice embedded font, Open Sans"

x="250"

<layer name="four"

style="square|tooltip"

tooltip="This is a variation, using the tooltip_style attribute"

tooltip_style="osx_tooltip_style"

x="350"

<layer name="five"

style="square|tooltip"

tooltip="And this is the same style, but using the tooltip_oy attribute"

tooltip_style="osx_tooltip_style"

tooltip_oy="-8"

x="450"

type="container"

keep="true"

scalechildren="true"

maskchildren="false"

handcursor="false"

bgalpha=".7"

bgcolor="0x000000"

bgcapture="true"

align="left"

y="25"

width="50"

height="50"

url="assets/hotspot.png"

alpha=".7"

onclick="if(linkedscene, loadscene(get(linkedscene),null,MERGE,BLEND(.5)); );"

<hotspot name="hotspot_a"

style="hotspot|tooltip"

ath="0"

atv="-20"

linkedscene="scene_2"

tooltip="It works on hotspots too!"

</scene>

<hotspot name="hotspot_b"

style="hotspot"

alpha=".5"

ath="10"

atv="-20"

linkedscene="scene_1"

onloaded="setup_tooltip(get(name));

copy(tooltip, scene[get(linkedscene)].title);"

</scene>

</krpano>

Tooltip Plugin tooltip.xml支持 Flash 与 HTML5

使用方法

设置

样式设定

发表评论 取消回复

发表评论取消回复