import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables } from '../../.storybook/blocks';
import * as stories from './tooltip.stories';
import { Flex } from '../react';
import styles from '../styles.module.css';

<Meta of={stories} />

# Tooltip
> Tooltip viser kort informasjon når brukeren holder musepekeren over (hover) eller fokuserer på et element. Den brukes til sekundær informasjon, for eksempel til å forklare hva et symbol betyr.

## Kode
- Bruk `data-tooltip="Hjelpetekst"` på hvilet et interaktivt element
- Bruk `data-tooltip-position="top | right | bottom | left"` for å endre plassering
- Dersom elementet ikke er interaktivt; legg på `tabindex="0"`
- Teksten blir også automatisk tilgjengelig for skjermlesere
- **Merk:** Tooltip senterer seg til sitt anker, så bruk en `<span data-tooltip="">` dersom du ønsker tooltip rundt kun tekst
<Canvas of={stories.Default} />

<CssVariables component="tooltip" />

## Skikk og bruk
<Flex data-items="350">
  {/* Tooltip med lang tekst */}
  <Example data-color="success" text="Bruk korte konsise forklaringer i Tooltip." zoom="100%">
      <button type="button" className={styles.button} data-tooltip="Tooltip eksempel">Hover meg</button>
  </Example>

  <Example data-color="danger" text="Unngå lange tekster i tooltip. Bruk maks fire ord. Bruk heller popover hvis du trenger lengre forklaringer." zoom="100%">
      <button type="button" className={styles.button} data-tooltip="Når du trykker på denne knappen vil det ikke skje noen ting. Dette er bare et eksempel på hvordan en tooltip ikke skal være.">Hover meg</button>
  </Example>
</Flex>