Pomoc kontekstowa (Tooltip) w Treściach formatowanych

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

Tooltipów osadzonych w Treściach (text content) można użyć w komponencie Radio grupa produktów - GesProductRadioGroup.

Treść informacyjna tooltipa wyświetlona zostanie nad ikoną pomocy. Nie ma możliwości wyboru/ustawienia innej pozycji.

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

Przykładowy 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>

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:

Przykładowe style

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

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