Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Tooltip
Eksempler og retningslinjer
Installation
HTML Struktur
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
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>