Gå til sidens indhold

Udvidelser

Tippy (tooltip)

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.

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 udvidelsen 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 under siden Til udviklere

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.

Tooltip (kommer frem ved mouse-over)

<div class="container py-8">
    <button class="button button-primary js-tippy"
        data-tippy-content="Dette er et tooltip">
        Knap med tooltip
        <span class="sr-only">Dette er tooltipteksten til
            skærmlæsere</span>
    </button>
</div>

Ikon med popover (kræver tryk)

<div class="container py-8">
    <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>
</div>

Ikon med tooltip

<div class="container py-8">
    <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>
</div>

Placering af tooltip

<div class="container py-8">
    <!-- Placering: top -->
    <button class="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>
</div>