Gå til sidens indhold

Kode

Tooltip og popover

Eksempler og retningslinjer

Installation

HTML Struktur

<a href="javascript:void(0)" class="js-tooltip"
    data-tooltip="Dette er en hjælpetekst i en popover">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#help-circle-outline"></use></svg>
</a>

Du bør opdatere følgende attributter til din løsning ved almindeligt tooltip:

  • data-tooltip: Din tooltip-tekst

  • Tooltip og popovers skal kunne lukkes med escape tasten på tastaturet.
  • Fokus skal blive på det element, der aktiverede tooltip eller popover.
  • Brug aria-describedby på elementet der udløser tooltip eller popover.
  • Tooltips skal både vises, ved markering med mus og tastatur.

Varianter

Placering af tooltip

<!-- Placering: top -->
<button class="button button-primary js-tooltip"
    data-tooltip-position="top" data-tooltip="Top tooltip">
    Top
</button>

<!-- Placering: bund -->
<button class="button button-primary js-tooltip"
    data-tooltip-position="bottom" data-tooltip="Bund tooltip">
    Bund
</button>

Ikon med popover (kræver tryk)

<a href="javascript:void(0)" class="popover js-tooltip"
    data-tooltip-trigger="click" data-tooltip-position="top"
    aria-label="Klik på ikon for tooltip"
    data-tooltip="Dette er en hjælpetekst i en popover">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#help-circle-outline"></use></svg>
</a>

Du bør opdatere følgende attributter til din løsning ved almindeligt tooltip:

  • data-tooltip: Din tooltip-tekst
  • data-tooltip-trigger: Hvis dit tooltip skal reagere kun ved klik, så skal denne sættes til click
  • aria-label: For at forklare, at brugeren skal aktivere knappen, for at få teksten