You are here: Configuration > Attributes and Arrays > Configuration Attribute Help Icons

Configuration Attribute Help Icons


In order to better inform sales reps about the product they are configuring, each Configuration attribute on the layout can have its own “Help” icon. Upon hovering the cursor over a Help icon, HTML defined by the admin will display to the sales user.

Help icons can be used to display PDFs, images, videos, simple text or anything that can be shown using HTML in order to empower the sales rep through better guided selling.

The admin can choose whether or not a Help icon is shown on the user side for each attribute that is on the Layout. If the Help icon will be shown on the user side, the admin can specify if the Help icon should be to the left of the attribute’s label, or to the right of the attribute’s value.

Help Icon Left of the Attribute Label Help Icon Right of the Attribute Value

Additionally, the admin can manipulate the site’s CSS in order to change the size of the content box that is shown to users when hovering over the Help icon.

If an attribute’s Help icon is enabled, but the attribute does not have an HTML Description defined, the Help icon will show on the user side, but nothing will show when the user hovers over the icon. It is a best practice to turn off the Help icon for all attributes that do not have a Description defined.

User Side Behavior when Help Icon is Enabled but no Description Defined


ClosedAdding Configuration Attribute Help Content

Configuration attribute Help content is managed within each individual attribute. To add Help content to an attribute:

  1. Open the Configuration attribute you want to add Help content to. See Configuration Attributes Overview for more information on navigating to a Configuration attribute.
  2. On the General tab, click the Edit HTML button next to the Description field.

    The Content HTML Editor window opens. The Content HTML Editor is a WYSIWYG HTML editor. Clicking the Edit HTML Source button in the Content HTML Editor opens the source HTML behind what is shown in the WYSIWYG editor, allowing the admin to do work within HTML.
  3. Add Help content to the Content HTML Editor window. The content shown in the editor will appear when a sales user hovers over the Help icon
  4. Click Save to save the attribute description.
  5. Click Update to save the changes to the attribute.

ClosedEnabling the Help Icon on the Configuration Flow Layout

In order for a Help icon to appear on the user side, it must be enabled on the Configuration Flow Layout Editor. To enable an attribute’s Help icon:

  1. Open the Configuration Flow Layout that the attribute with the Help content is on. See Configuration Flows for the navigation steps to open the Configuration Flow Layout Editor.
  2. Locate the attribute in the Layout editor and click the Properties icon (a gear icon) on the attribute.

    The Attribute Properties dialog box appears.
  3. Select the Help Icon checkbox to enable the checkbox on the user side.

    An Alignment drop-down menu appears below the Help Icon checkbox.
  4. Optionally change where the Help icon will appear in relation to the attribute label/value on the user side by selecting either Left of the Label or Right of the Value from the Alignment drop-down menu.

  5. Click Ok to save the attribute properties.
  6. Click Save to save the Layout.

ClosedModifying the Help Pop-Up Box via CSS

The length and width of a Help icon’s pop-up box is set within the site’s CSS. To change the size of the Help pop-up, you will need to complete the following steps:

ClosedInstall Firebug in Firefox

You will use Firebug to investigate the CSS that is acting on the Help pop-up. To install Firebug:

  1. Open Mozilla Firefox.
  2. Go to
  3. Click the red Install Firebug button.
  4. Click the Download link under the current stable version of Firebug.
  5. Click the green Add to Firefox button and wait as the extension downloads.
    The Software Installation dialog box appears.
  6. Click the Install button in the Software Installation dialog box.
  7. Once Firebug has been installed, use the F12 key on your keyboard to open/close the Firebug window in Firefox.

ClosedFind Help Pop-up CSS Class and Stylesheet Using Firebug

ClosedModify and Upload CSS



Related Topics Link IconSee Also