Tooltip

• Klikbart ikon
• Tekst
• Knap
• Placering

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

Installation

HTML Struktur

<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

<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

<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

<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="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>