# Contextual help (Tooltip) in formatted content

{% hint style="info" %}
The availability of functionality depends on the license and may not be available in all deployments.
{% endhint %}

{% hint style="info" %}
Tooltips embedded in **Contents** (text content) can be used in the product Radio group component - GesProductRadioGroup.
{% endhint %}

{% hint style="info" %}
The informational content of the tooltip will be displayed above the help icon. There is no option to choose/set a different position.
{% endhint %}

## 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”:

{% code title="Sample HTML" %}

```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>
```

{% endcode %}

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:

{% code title="Sample styles" %}

```css
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;
}
```

{% endcode %}

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.