Designsystemet Flutter

Utseende

DsTooltip ​

Verktøyshjelp som vises ved hover eller fokus.

Bruk ​

Når bør du bruke DsTooltip? ​

  • Når du trenger å gi tilleggsinformasjon om et element uten å ta opp plass i grensesnittet.
  • Når ikoner eller knapper trenger en forklarende tekst for å bli forståelige.
  • Når du ønsker å gi kontekst om et element uten at brukeren må klikke.

Når bør du unngå DsTooltip? ​

  • Når informasjonen er kritisk og alltid bør være synlig. Vis den heller direkte i grensesnittet.
  • Når du trenger interaktivt innhold (lenker, knapper). Bruk heller DsPopover.

Eksempler ​

Grunnleggende bruk ​

DsTooltip — interaktiv forhåndsvisning
Åpne i nytt vindu ↗
dart
DsTooltip(
  message: 'Klikk for å laste ned rapporten',
  child: DsButton(
    variant: DsButtonVariant.secondary,
    onPressed: () => lastNed(),
    child: Text('Last ned'),
  ),
)

Tooltip på ikonknapp ​

dart
DsTooltip(
  message: 'Slett element',
  child: DsButton(
    variant: DsButtonVariant.tertiary,
    onPressed: () => slettElement(),
    child: Icon(DsIcons.trash),
  ),
)

Retningslinjer ​

  • Hold hjelpeteksten kort og informativ, helst en enkelt setning.
  • Ikke bruk tooltip for å gjenta informasjon som allerede er synlig.
  • Plasser tooltip slik at den ikke dekker viktig innhold.

Tekst ​

  • Bruk kort og beskrivende tekst som gir nyttig tilleggsinformasjon.
  • Unngå lengre avsnitt -- tooltip er ment for korte hint.

Har du innspill til denne komponenten? Send innspill på GitHub