Tooltip - Vysvetlivka

Vysvetlivka

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-tooltip " id="tooltip-default-container" data-module="govuk-tooltip" >
    <span class="govuk-tooltip__label">
      Základné nastavenie tooltipu
    </span>
  <div class="govuk-tooltip__item-wrapper">

    <button type="button" class="govuk-tooltip__trigger " aria-controls="tooltip-default" aria-expanded="false" aria-label="Zobraziť vysvetlivku">
      <span aria-hidden="true">i</span>
    </button>

    <div id="tooltip-default" class="govuk-tooltip__content " role="tooltip" aria-hidden="true">

      <div class="govuk-tooltip__body">
        Toto je príklad použitia tooltipu v základnom stave. Text by mal mať dĺžku max. 290 znakov.
      </div>

    </div>
  </div>
</div>

Makro

{% from "govuk/components/tooltip/macro.njk" import govukTooltip %}

{{ govukTooltip({
  id: "tooltip-default",
  label: "Základné nastavenie tooltipu",
  content:
    "Toto je príklad použitia tooltipu v základnom stave. Text by mal mať dĺžku max. 290 znakov."
}) }}

Vysvetlivka (zameranie klávesnicou)

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-tooltip " id="tooltip-focus-container" data-module="govuk-tooltip" >
    <span class="govuk-tooltip__label">
      Zameranie klávesnicou
    </span>
  <div class="govuk-tooltip__item-wrapper">

    <button type="button" class="govuk-tooltip__trigger govuk-tooltip__trigger--focused" aria-controls="tooltip-focus" aria-expanded="true" aria-label="Zobraziť vysvetlivku">
      <span aria-hidden="true">i</span>
    </button>

    <div id="tooltip-focus" class="govuk-tooltip__content govuk-tooltip__content--visible" role="tooltip" aria-hidden="false">

      <div class="govuk-tooltip__body">
        Po zameraní focusom sa objaví oranžový obrys. Text by mal mať dĺžku max. 290 znakov.
      </div>

    </div>
  </div>
</div>

Makro

{% from "govuk/components/tooltip/macro.njk" import govukTooltip %}

{{ govukTooltip({
  id: "tooltip-focus",
  label: "Zameranie klávesnicou",
  content:
    "Po zameraní focusom sa objaví oranžový obrys. Text by mal mať dĺžku max. 290 znakov.",
  triggerClasses: "govuk-tooltip__trigger--focused",
  contentClasses: "govuk-tooltip__content--visible"
}) }}

Vysvetlivka (iba ikonka)

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-tooltip " id="tooltip-icon-container" data-module="govuk-tooltip" >
  <div class="govuk-tooltip__item-wrapper">

    <button type="button" class="govuk-tooltip__trigger " aria-controls="tooltip-icon" aria-expanded="false" aria-label="Zobraziť vysvetlivku">
      <span aria-hidden="true">i</span>
    </button>

    <div id="tooltip-icon" class="govuk-tooltip__content " role="tooltip" aria-hidden="true">

      <div class="govuk-tooltip__body">
        Toto je len informačná ikonka bez labelu. Text by mal mať dĺžku max. 290 znakov.
      </div>

    </div>
  </div>
</div>

Makro

{% from "govuk/components/tooltip/macro.njk" import govukTooltip %}

{{ govukTooltip({
  id: "tooltip-icon",
  content:
    "Toto je len informačná ikonka bez labelu. Text by mal mať dĺžku max. 290 znakov."
}) }}

Vysvetlivka (horná vysvetlivka)

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-tooltip govuk-!-margin-top-5" id="tooltip-top-container" data-module="govuk-tooltip" data-position="top">
    <span class="govuk-tooltip__label">
      Pozícia hore
    </span>
  <div class="govuk-tooltip__item-wrapper">

    <button type="button" class="govuk-tooltip__trigger " aria-controls="tooltip-top" aria-expanded="false" aria-label="Zobraziť vysvetlivku">
      <span aria-hidden="true">i</span>
    </button>

    <div id="tooltip-top" class="govuk-tooltip__content " role="tooltip" aria-hidden="true">

      <div class="govuk-tooltip__body">
        Vysvetlivka sa zobrazí nad ikonou.
      </div>

    </div>
  </div>
</div>

Makro

{% from "govuk/components/tooltip/macro.njk" import govukTooltip %}

{{ govukTooltip({
  id: "tooltip-top",
  label: "Pozícia hore",
  position: "top",
  classes: "govuk-!-margin-top-5",
  content: "Vysvetlivka sa zobrazí nad ikonou."
}) }}

Vysvetlivka (dolná vysvetlivka)

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-tooltip " id="tooltip-bottom-container" data-module="govuk-tooltip" data-position="bottom">
    <span class="govuk-tooltip__label">
      Pozícia dole
    </span>
  <div class="govuk-tooltip__item-wrapper">

    <button type="button" class="govuk-tooltip__trigger " aria-controls="tooltip-bottom" aria-expanded="false" aria-label="Zobraziť vysvetlivku">
      <span aria-hidden="true">i</span>
    </button>

    <div id="tooltip-bottom" class="govuk-tooltip__content " role="tooltip" aria-hidden="true">

      <div class="govuk-tooltip__body">
        Vysvetlivka sa zobrazí pod ikonou. Text by mal mať dĺžku max. 290 znakov.
      </div>

    </div>
  </div>
</div>

Makro

{% from "govuk/components/tooltip/macro.njk" import govukTooltip %}

{{ govukTooltip({
  id: "tooltip-bottom",
  label: "Pozícia dole",
  position: "bottom",
  content:
    "Vysvetlivka sa zobrazí pod ikonou. Text by mal mať dĺžku max. 290 znakov."
}) }}