close panorama

Tooltip Plugin tooltip.xml for Flash and HTML5
by Hernán Sartorio - hernan@uruguay360.com.uy

Tooltip screenshot
  • A simple, customizable tooltip plugin that can be used on any layer or hotspot.
  • Works seamlessly on touch devices.
  • The tooltip is displayed above the layer/hotspot that triggers it, on a fixed position relative to it.
  • Requires the Textfield and Abs plugin (included). For Krpano 1.17 and higher.
  • This plugin is also included in the purchase/download of the Auto Thumbs plugin.

krpano Forum Discussion Thread

Tooltip Plugin Thread

Buy/Download

  • The plugin price is €29 (final).
  • All future updates are free.
Buy and download link: Tooltip Plugin for Kprano.

Usage

Include the plugin's xml file:

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

Then, on each layer on which you wish to display a tooltip add a "tooltip" style, and a tooltip attribute containing the text of the toolip. For example:

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

Optionally you can add the attributes tooltip_style and/or tooltip_oy to override the global tooltip settings (see Settings below) on a per layer basis.

Usage on hotspots / layers that define an onloaded event

The tooltip style that you add to a layer just contains an onloaded event, that calls an action to setup the tooltip there.

When using on hotspots, for example, you probably want to get the tooltip text dinamically from the linked scene title. For that we need to use the onloaded event too, and as one onloaded definition would override the other, we'll need to call the setup action manually on the defined hotspot's onloaded event.

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

Check out the example's XML source at the bottom of the page for more complete examples.

Settings

These are all the possible settings and their default values.

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

  • style
    The name of the style tag to customize the appearance of the tooltip. See the Styling section.
  • oy
    Allows you to adjust the vertical position of the tooltip relative to the layer. See layer[...].oy.
  • visible
    Controls the visiblity of the plugin.

Styling

This is the default tooltip style, which will be used if you don't specify one in the settings. These are also all the possible attributes that the tooltip accepts for styling.

<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
    font_family
    font_size
    font_weight
    Font styling options.
  • html5_font_family
    Optional. Allows you to specify a different font family when HTML5 is used.
The rest of the attributes belong to the textfield plugin, and are linked to their documentation.

Example

XML source - View in full window.
CLICK TO VIEW EXAMPLE