Context help (Tooltip) in formatted Content

The availability of features depends on the license and may not be available in all deployments.

Tooltips embedded in Contents (text content) can be used in the product Radio group component - GesProductRadioGroup.

The informational content of the tooltip will be displayed above the help icon. There is no option to choose/set a different position.

Requirements

• Content (Text content) should be of HTML type.

• Remember to add styles for divs with the appropriate attributes.

• Div with attribute tooltip is responsible for the tooltip placement, and the div with the attribute tooltip-content is responsible for the tooltip content. The values of these attributes must match (they are used to link them).

HTML structure

To create a tooltip you need to create 2 divs with the appropriate attributes:

• div[tooltip]

• div[tooltip-content]

• div[tooltip-title] - sets the title for the dialog window replacing the default value 'Help' (for mobile RWD)

Optionally:

• div[tooltip-native-title] - native mode only, sets the title for the dialog window replacing the default value 'Help'

• div[tooltip-native-action-close-label] - native mode only, sets the text on the dialog button replacing the default value 'Close'

• div[tooltip-native-spacing-multiplier] - in native mode sets the line spacing multiplier (lineSpacingMultiplier) in the infotip; in mobile mode it acts similarly for the text in the popup content.

Example “in the target form”:

Sample HTML

<div tooltip="myTooltip"></div>
<div></div>
<div tooltip-content="myTooltip">Ala has a cat</div>
<div tooltip-title="myTooltip">New title</div>
<div tooltip-native-title="myTooltip">New title</div>
<div tooltip-native-action-close-label="myTooltip">I accept</div>
<div tooltip-native-spacing-multiplier="myTooltip">1.7</div>

In the example above we have one tooltip with the content "Ala has a cat."

Styles (CSS / SCSS)

Sample styles that need to be added for these divs:

Example styles

div[tooltip-content] { display: none; }
div[tooltip-native-action-close-label] { display: none; }
div[tooltip-native-title] { display: none; }
div[tooltip-native-spacing-multiplier] { display: none; }

div[tooltip] {
  @include ex-tooltip-button;
  display: inline-block;
  margin-left: 8px;
  margin-bottom: -3px;
  height: 17px;
  width: 17px;
}

Notes:

• div[tooltip] is responsible for positioning the icon/element that triggers the tooltip.

• div[tooltip-content] contains the content that will be shown in the tooltip window — its attribute must have the same value as the attribute of div[tooltip] to link them.