import { Meta, Canvas } from '@storybook/addon-docs/blocks'
import * as VTooltipStories from './v-tooltip.stories'

<Meta title="Composants/Composants Vuetify/VTooltip" />

<div className="header">
    <h1>VTooltip</h1>
Ce composant utilise directement le composant natif `v-tooltip` de Vuetify avec les couleurs du thème actif du design system.
Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-tooltip/#props).
</div>

## Positions

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '50px', alignItems: 'center', padding: '24px' }}>
  <Canvas of={VTooltipStories.Top} />
  <Canvas of={VTooltipStories.Bottom} />
  <Canvas of={VTooltipStories.Left} />
  <Canvas of={VTooltipStories.Right} />
</div>

## Tooltip interactif (RGAA 10.13.2)

Le composant `VTooltip` est configuré avec `interactive: true` par défaut dans le design system. Cela signifie que le tooltip reste ouvert lorsque l'utilisateur déplace sa souris de l'activateur vers le contenu du tooltip, permettant de sélectionner et copier le texte.

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', alignItems: 'center', padding: '24px' }}>
  <Canvas of={VTooltipStories.Interactive} />
</div>

## Désactivé

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '24px', alignItems: 'center', padding: '24px' }}>
  <Canvas of={VTooltipStories.Disabled} />
</div>

## Locations disponibles

- `top` – Tooltip au dessus de l'élément (défaut)
- `bottom` – Tooltip en dessous de l'élément
- `left` – Tooltip à gauche de l'élément
- `right` – Tooltip à droite de l'élément