Javascript Tooltips

Now available in the latest versions of Twister4Word - Javascript Tooltips (click here for some samples)!

Tooltips are a great supplement to a Help System and we are making it really easy to attach tooltips to your RIA/web app/web site.

Twister4Word has a special output type for generating rich text tooltips for web apps/sites.

This output type allows you or your technical writer to use standard Microsoft Word to author and maintain rich text tooltips for your web app/site.

Based on standards

The tooltip runtime is based on the de facto standard jQuery toolkit and the powerful qTip plugin. (other plugins will eventually be supported).

Separating the tooltip text from the actual web pages

It's a good idea to separate the tooltips from the actual web pages - it allows the technical writer to author the tooltips in standard MS Word and it doesn't clutter up the markup in the web pages.

How does it work? - within MS Word

You divide your Word document into topics using the TopicID style. The text of the TopicID style paragraph names the topic. This is the name you attach to an UI element in your app.

The document can be broken up with Heading1 styles, i.e. a topic will end with a Heading1 paragraph. Use Heading1 styles to make logical sections of your tooltips.

Note that paragraph-style properties such as margins and borders are not converted. MS Word Paragraphs are converted to standard HTML paragraph:s.

How does it work? - within your site/app

Twister4Word will generate a JavaScript file with all the tooltips. Each tooltip has an "tooltip identifier", all you need to do is to assign each UI element to a tooltip id and link to the generated script file.

Here is a sample page with some tooltips

Advanced features - Snippets

Within you MS Word document, you can use Snippet Blocks for content that is used in many tooltips. You define a Snippet Block with the BeginSnippet style and you end the block with the EndSnippet style. The text in the BeginSnippet paragraph names the Snippet. You insert the snippet into a topic by using the variable syntax [[MySnippet]]. You can make these snippet links more visible by assigning them a style, e.g. SnippetLink. The sample Tooltip document that ships with Twister4Word has a sample snippet block.

Tooltips Poll

provide some feedback, participate in our poll!