Context help (Tooltip) in formatted content

Availability of functionality depends on the license and may not be available in all deployments.

Embedded tooltips in Content (text content) can be used in the Radio product group component - GesProductRadioGroup.

The tooltip informational content will be displayed above the help icon. It is not possible to choose/set another position.

Requirements

• Content (Text content) should be of type HTML.
• Remember to add styles for divs with the appropriate attributes.
• Div with the attribute tooltip is responsible for the position of the tooltip, 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)

Optional:

• 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 window button, replacing the default value 'Close'
• div[tooltip-native-spacing-multiplier] - in native mode sets the line height multiplier (lineSpacingMultiplier) in the infotip, and in mobile mode has an analogous effect for the text in the popup content.

Example “in the final form”:

Example HTML

<div tooltip="myTooltip"></div>
<div></div>
<div tooltip-content="myTooltip">Alice 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">Accepts</div>
<div tooltip-native-spacing-multiplier="myTooltip">1.7</div>

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

Styles (CSS / SCSS)

Example 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 div[tooltip] attribute to link them.