Gå til sidens indhold

Vælg et tema

Luk

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Tooltip og popover

<button" class="js-tooltip button-unstyled" data-tooltip="Dette er en hjælpetekst i en popover"> </button>

Eksempler og retningslinjer

Installation

HTML Struktur

<button" class="js-tooltip button-unstyled"
    data-tooltip="Dette er en hjælpetekst i en popover">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#help-circle"></use></svg>
    </button>

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.

Javascript

Tooltip komponenten kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.Tooltip(document.getElementById('Tooltip-ID'));

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)

<button class="popover js-tooltip button-unstyled"
    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"></use></svg>
</button>

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