Gå til sidens indhold

Kode

Tippy.js

Tooltip og popover er komponenter, som brugerne enten kan aktiverer eller fører musen hen over for at få en kort forklaring på indhold, ord eller begreber.

<a href="javascript:void(0)" class="js-tippy"
    data-tippy-content="Dette er en hjælpetekst i en tooltip"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#help-circle-outline"></use></svg><span
        class="sr-only">Dette er tooltipteksten til skærmlæsere,
        popover</span></a>

Retningslinjer

Se retningslinjerne for tooltip komponenten

Implementering

Tippy.js er et tredjeparts bibliotek, som du selv skal hente ind i dit projekt. Vi har lavet et tema i dkfds-plugins pakken, som kan lægges ind over således at pluginnet følger det visuelle udtryk i Det Fælles Designsystem.

Installer dkfds-plugins fra npm og inkludér enten CSS eller SCSS filen for pluginnet i dit projekt. For mere info, se siden Implementering af DKFDS.

Stien til tema-filen du skal inkludere for Tippy.js er henholdsvis [path-to-plugins-project]/dist/css/dkfds-tippy-theme.standalone.min.css for CSS filen og ~dkfds-plugins/dist/scss/dkfds-tippy-theme for SCSS filen.

Man skal dog stadig inkludere Tippys egen CSS og JavaScript. Følg Tippys egen dokumentation for implementering af pluginnet i dit projekt.

Placering af tooltip

<!-- Placering: top -->
<button class="mt-8 button button-primary js-tippy"
    data-tippy-placement="top" data-tippy-content="Top tooltip">Top <span
        class="sr-only">Dette er tooltipteksten til skærmlæsere,
        top</span></button>

<!-- Placering: bund -->
<button class="button button-primary js-tippy"
    data-tippy-placement="bottom" data-tippy-content="Bund tooltip">Bund
    <span class="sr-only">Dette er tooltipteksten til skærmlæsere,
        bottom</span></button>

<!-- Placering: venstre -->
<button class="button button-primary js-tippy" data-tippy-placement="left"
    data-tippy-content="Venstre tooltip">Venstre <span
        class="sr-only">Dette er tooltipteksten til skærmlæsere,
        venstre</span></button>

<!-- Placering: højre -->
<button class="button button-primary js-tippy" data-tippy-placement="right"
    data-tippy-content="Højre tooltip">Højre <span class="sr-only">Dette er
        tooltipteksten til skærmlæsere, højre</span></button>

Ikon med popover (kræver tryk)

<a href="javascript:void(0)" class="popover js-tippy"
    data-tippy-trigger="click"
    data-tippy-content="Dette er en hjælpetekst i en popover"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#help-circle-outline"></use></svg><span
        class="sr-only">Dette er tooltipteksten til skærmlæsere,
        popover</span></a>