Gå til sidens indhold

Komponenter

Tooltip og popover

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

Tilgængelighed

  • Tooltip og popovers skal kunne lukkes med escape knappen på keyboardet.
  • Fokus skal blive på det element, der afstedkom tooltippen eller popoveren.
  • Brug aria-describedby på elementet der udløser tooltippen eller popoveren.
  • Tooltips skal både vises, ved markering med mus og keyboard.

Brugervenlighed

Anvendes til

  • Brug tooltip til præcisering af specifikke elementer i brugergrænsefladen.
  • Brug popover til at knytte relaterede informationer, der uddyber/forklarer et element eller en funktion i brugergrænsefladen.

Anvendes ikke til

Informationer der er essentielle for at brugeren kan gennemføre løsningen, hvis indholdet er vigtigt for brugerens succes, så placer indholdet på siden som brød- eller hjælpetekst.

Vejledning

  • Gør indholdet i tooltips og popovers så kort og koncist som muligt.
  • Vær konsistent i brugen af tooltips og popovers, så brugeren ikke skal gætte sig til om der er tooltips/popovers eller ej.
  • Gør det let at se, hvilket element tooltippen/popoveren hører til.
  • Brug altid tooltips til funktionsikoner (klikbare ikoner) uden label.
  • Sørg for at tooltips og popovers er tydelige at se og læse.
  • Placer tooltips og popovers så de ikke skygger for det indhold på siden som de relaterer til. Placeres de forkert kan brugeren blive nødt til at lukke og åbne tooltip/popover igen for at forstå sammenhængen.
  • Sættes der tooltip/popover på et ord i en tekst, markeres ordet med en stiplet linje under. Brug det i begrænset omfang, da det let virker forstyrrende.

Links

Tooltips og popovers bygger på tippy.js.

For at initialisere et tooltip eller en popover skal et HTML-element have klassen '.js-tooltip' og en 'title'-attribut:

<button class="button button-primary js-tooltip" title="Dette er et tooltip">Knap med tooltip</button>

Vi definerer et tooltip som en hjælpetekst som vises ved mouseover, og en popover som hjælpetekst der vises ved et klik. For at lave et tooltip om til en popover skal der tilføjes følgende attribut: data-tippy-trigger="click"

Tippy.js har mange konfigurationsmuligheder, og den fulde liste kan ses på deres hjemmeside.

I følgende eksempel er tooltippet konfigureret til at vises til venstre:

<button class="button button-primary js-tooltip" data-tippy-placement="left" title="Tooltip til venstre">Knap med tooltip til venstre</button>

Tooltip (kommer frem ved mouse-over)

<div class="container py-8">
    <button class="button button-primary js-tooltip" role="tooltip"
        title="Dette er et tooltip">
        Knap med tooltip
        <span class="sr-only">Dette er tooltipteksten til
            screenreaders</span>
    </button>
</div>

Ikon med popover (kræver tryk)

<div class="container py-8">
    <a href="javascript:void(0)" class="popover js-tooltip"
        data-tippy-trigger="click" role="tooltip"
        title="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 screenreaders,
            popover</span></a>
</div>

Ikon med tooltip

<div class="container py-8">
    <a href="javascript:void(0)" class="js-tooltip" role="tooltip"
        title="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 screenreaders,
            popover</span></a>
</div>

Placering af tooltip

<div class="container py-8">
    <!-- Placering: top -->
    <button class="button button-primary js-tooltip"
        data-tippy-placement="top" title="Top tooltip">Top <span
            class="sr-only">Dette er tooltipteksten til screenreaders,
            top</span></button>

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

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

    <!-- Placering: højre -->
    <button class="button button-primary js-tooltip"
        data-tippy-placement="right" title="Højre tooltip">Højre <span
            class="sr-only">Dette er tooltipteksten til screenreaders,
            højre</span></button>
</div>