Introduction

The Tooltip component was introduced to provide in-app documentation. The Tooltip component is named GluuTooltip and is available in the base application.

Integration

The GluuTooltip component is already integrated into most of the base UI components like GluuSelectRow, GluuInputRow, etc. Below is an example of a use case:

<GluuInputRow
          label="fields.sentinel_master_group_name"
          name="sentinelMasterGroupName"
          lsize={6}
          rsize={6}
          formik={formik}
          value={config.sentinelMasterGroupName}
          doc_category={CACHE}
        />

The most important attribute here is the documentation category doc_category, which defines the section in the i18n file where we can find the documentation of the current field. In some cases, you can also specify the doc_entry which is the entry's key on the section identified by doc_category. When doc_entry is not specified, the *name is used instead.

Usage

We encourage you to use the base components as most as possible because it is already built with i18n support and documentation support.

• Using with component:

<GluuInputRow
          label="fields.sentinel_master_group_name"
          name="sentinelMasterGroupName"
          lsize={6}
          rsize={6}
          formik={formik}
          value={config.sentinelMasterGroupName}
          doc_category={CACHE}
        />

 <GluuToogleRow
          name="useSSL"
          formik={formik}
          lsize={6}
          rsize={6}
          label="fields.use_ssl"
          value={config.useSSL}
          doc_category={CACHE}
        />

• Using on a custom component:

In this scenario, all you have to do is to wrap your custom component with the GluuTooltip like this and provide the following attributes: doc_category, doc_entry.

<GluuTooltip doc_category={doc_category} doc_entry={doc_entry}>
<CustomComponent
          name="sentinelMasterGroupName"
          ...
        />
</GluuTooltip>