Help

Overview

HQ has JavaScript logic to initialize tooltip-based contextual help.

Usage

Many pages in HQ use these help icons, including the Messaging Dashboard. Help icons are frequently used in table colum headers and next to field labels in forms. App builders can also incorporate help icons in Web Apps, to add field-specific help for case search fields.

Using help icons requires the Bootstrap javascript library and also hq.helpers.js. The tooltip uses Bootstrap's popover widget. It supports a variety of options, which can be set using data- attributes. The most commonly used in HQ are:

• title
• content
• placement - specify where the popover should appear, relative to the icon (top, etc.)
• html - true if the popover contains HTML markup

A Working Example

The example below demonstrates help in a template.

<div id="help-example">
  <button class="btn btn-outline-primary">Do it!</button>
  <span
    class="hq-help-template"
    data-title="Do what, exactly?"
    data-content="
      Put 1 teaspon baking soda in a cup. Pleace this into the volcano crater.
      Mix vinegar, dish soap, a few drops of water, and a few drops of red
      food coloring in a second cup. Quickly pour liquid into the backing soda
      cup in the crater.
    "
    data-placement="right"
  ></span>
</div>