Gå til sidens indhold

Vælg et tema

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


Kode

Tooltip

Eksempel på tooltip

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<button class="button button-unstyled js-tooltip" type="button"
    data-tooltip="Dette er et tooltip" data-tooltip-trigger="click">
    <svg class="icon-svg mr-0 mt-0" focusable="false" aria-hidden="true"><use xlink:href="#help"></use></svg>
    <span class="sr-only">Hvad betyder det?</span>
</button>

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')).init();

Varianter

Klikbart ikon med tooltip

Kodeeksempel
<button class="button button-unstyled js-tooltip" data-tooltip="Slet element">
    <svg class="icon-svg mr-0 mt-0" focusable="false" aria-hidden="true"><use xlink:href="#trash-can"></use></svg>
    <span class="sr-only">Slet</span>
</button>

Tooltip på knappen aktiveres ved hover eller fokus af knappen. Ikonet kan ændres så det svarer til knappens funktion.

Tooltip aktiveres som standard med hover og fokus på knappen, men i visse situationer (fx hvor ikonets motiv er et spørgsmål og hvor der ikke er anden funktion på knappen) kan man sætte tooltip til også at aktivere ved klik. Tilføj attributten data-tooltip-trigger="click" på knappen for at tilføje visning af tooltip ved klik.

Tekst med tooltip

Kodeeksempel
<p>Her er der <a href="javascript:void(0)" class="tooltip-link js-tooltip"
        data-tooltip="Dette er et tooltip" data-tooltip-trigger="click">ord med tooltip</a>
    inde i en tekst</p>

Tooltip i teksten aktiveres ved hover, fokus af knappen eller klik.

Knap med tooltip

Kodeeksempel
<button class="button button-primary js-tooltip" data-tooltip="Dette er et tooltip">
    Knap med tooltip
</button>

Tooltip i teksten aktiveres ved hover og fokus af knappen.

Placering af tooltip

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

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