Contextual help (Tooltip) in formatted contents

The availability of functionality 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 type HTML.

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

• Div with the 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 for linking).

HTML structure

To create a tooltip you must 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 spacing multiplier (lineSpacingMultiplier) in the infotip, in mobile mode acts analogously for the text in the popup content.

Example “in target form”:

Sample HTML

<div tooltip="myTooltip"></div>
<div></div>
<div tooltip-content="myTooltip">Ala ma kota</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 ma kota".

Styles (CSS / SCSS)

Example styles that need to be added for these divs:

Sample 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.