# Pomoc kontekstowa (Tooltip) w Treściach formatowanych

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

{% hint style="info" %}
Tooltipów osadzonych w **Treściach** (text content) można użyć w komponencie Radio grupa produktów - GesProductRadioGroup.
{% endhint %}

{% hint style="info" %}
Treść informacyjna tooltipa wyświetlona zostanie nad ikoną pomocy. Nie ma możliwości wyboru/ustawienia innej pozycji.
{% endhint %}

## Wymagania

* **Treść** (Text content) powinna być typu HTML.
* Trzeba pamiętać o dodaniu styli dla divów z odpowiednimi atrybutami.
* Div z atrybutem **tooltip** odpowiada za położenie tooltipa, a div z atrybutem **tooltip-content** odpowiada za zawartość tooltipa. Wartości tych atrybutów muszą się zgadzać (służą do powiązania).

## Struktura HTML

Aby stworzyć tooltip trzeba stworzyć 2 divy z odpowiednimi atrybutami:

* div\[tooltip]
* div\[tooltip-content]
* div\[tooltip-title] - ustawia tytuł dla okna dialogowego zastępując wartość domyślną 'Pomoc' (dla mobile RWD)

Opcjonalnie:

* div\[tooltip-native-title] - tylko tryb natywny, ustawia tytuł dla okna dialogowego zastępując wartość domyślną 'Pomoc'
* div\[tooltip-native-action-close-label] -  tylko tryb natywny, ustawia tekst na przycisku okna dialogowego zastępując wartość domyślną 'Zamknij' 
* div\[tooltip-native-spacing-multiplier] -  w trybie natywnym ustawia mnożnik wysokości linii (lineSpacingMultiplier) w infotip, w trybie mobile analogiczne działanie dla tekstu w treści popupu.

Przykład „w docelowej formie”:

{% code title="Przykładowy HTML" %}

```html
<div tooltip="myTooltip"></div>
<div></div>
<div tooltip-content="myTooltip">Ala ma kota</div>
<div tooltip-title="myTooltip">Nowy tytuł</div>
<div tooltip-native-title="myTooltip">Nowy tytuł</div>
<div tooltip-native-action-close-label="myTooltip">Akceptuje</div>
<div tooltip-native-spacing-multiplier="myTooltip">1.7</div>
```

{% endcode %}

W powyższym przykładzie mamy jednego tooltipa z treścią "Ala ma kota".

## Style (CSS / SCSS)

Przykładowe style, jakie trzeba dodać dla tych divów:

{% code title="Przykładowe style" %}

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

Uwagi:

* div\[tooltip] odpowiada za pozycjonowanie ikony/elementu wywołującego tooltip.
* div\[tooltip-content] zawiera treść, która zostanie pokazana w oknie tooltipa — jej atrybut musi mieć tę samą wartość co atrybut div\[tooltip], by je powiązać.