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

Eksempler og retningslinjer

Installation

HTML Struktur

<button class="js-tooltip button-unstyled"
    data-tooltip="Dette er et tooltip" data-tooltip-trigger="click">
    <svg class="icon-svg" 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'));

Varianter

Klikbart ikon med tooltip

<button class="js-tooltip button-unstyled" data-tooltip="Slet element">
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#delete"></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

<p>Her er der <a href="javascript:void(0)" class="js-tooltip tooltip-link"
        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

<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

<!-- 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>