Technology overview

This user guide is a part of a demonstration that showcases how to make context help for a web application with Dr.Explain tool.

The technology allows to integrate help manual created with Dr.Explain right into a web site or a web application. You can easily bind clickable help icons to a certain page sections or controls which require explanations.

Just a few steps are required to do this,

1. Insert Dr.Explain context web help script into the code of your web page

In the data-decontext-url parameter set the URL of your online manual made with Dr.Explain. The online manual can be published either on your product website or on tiwri.com technical writing platform.

Note: please turn on Print version pages in Dr.Explain HTML export settings. It's the print version pages that are displayed in the context help pop up windows due-to their minimalist and clean design.

2. Add context help attributes to page elements

To attach a clickable help icon with a help topic pop up to an HTML element (e.g. input, div, table or else) just add the special attributes to its HTML tag like shown bellow.

<div

data-decontext="true"

data-decontext-position-x="right"

data-decontext-position-y="top"

data-decontext-filename="topic.html"

>...</div>

The attributes:

data-decontext - enables/disables the context web help icon for the element.

data-decontext-position-x - horizontal position of the help icon relative to the element (left, center or right (default value))

data-decontext-position-y - vertical position of the help icon relative to the element (top (default value), center or bottom)

data-decontext-filename - online manual help topic file name to be shown in the popup window

data-decontext-bgcolor - help icon background color. The default color is #bbb (light gray).

data-decontext-fgcolor - help icon text (question mark) color. The default color is #fff (white).

data-decontext-width - help icon width. The default width is 24 pixels.

data-decontext-height - help icon height. The default height is 24 pixels.

3. Publish your web page changes

Once the changes are published a help icon will be shown on those page elements. The popup window with a certain help topic will be shown once a user clicks the help icon.

Note: decontext.js script is a subject to change and improvements. We recommend to visit this page and Dr.Explain help documentation from time to time to keep abreast of its changes and modifications.