HTML Tool Tip

The 360 product viewer from version 1.4.8 and above supports a new featre: HTML tool-tip. Hoovering a hotspot caan show a nicely crafted popup with your custom HTML code (even youtube video).

html-tooltip-animated

How to set up an html tool-tip
Currently you need to edit the config.js from the output folder in a text editor (such as SublimeText,TextMate,Notepad++…).

The content of the config.js will look like this:

If not html-tooltip is defined, a default tooltip shows with the text defined in the title node: “title”: {“text”: “Headphones detail”}

To override the default title, add the toolTip node into the hotspot definition.
Please always check that the quotes (“”) are closed and that the “statements” end with the collon (,). Any small typo can render the config.js not usable.

This is how a correct html tooltip definition looks like:

The tool-tips HTML code is located in the toolTip->html->content node.

In the above example, I have minified the html code so it does not break the layout of the config.js file. To produce a html tooltip as in the image at the top of this page, I have used this html code:

If you want to make your life easier, it is possible to use one single image.

Hotspot click-logic
Any hotspot can have an action assigned to it when it is clicked on:
– Show an image (image hotspot)
– Open a webpage (url hotspot)
– Launch Javascript function (javascript hotspot)
– Do nothing (blank hotspot)

When using the HTML tooltip, clicking on the HTML tooltip will trigger the image/url/javascript action, if such action is defined. If no action is defined, clicking the hotspot has no action.

Other notes:
In my example I have used inline styles, but it is possible to place the styles in an external file.
Every html tooltip is wrapped in a div with the css class “rotate-tool-tooltip-wrapper” assigned to it.