Reddot UI Library

Docs
Tooltip

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/tooltip.json

Utilisation

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
 
export function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover</Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

API Reference

TooltipProvider

Fournit le contexte nécessaire pour tous les tooltips. Doit envelopper votre application.

Tooltip

Contient toutes les parties d'un tooltip.

TooltipTrigger

L'élément qui déclenche l'affichage du tooltip.

TooltipContent

Le composant qui contient le contenu du tooltip.

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""top"The preferred side of the trigger to render against
sideOffsetnumber0The distance in pixels from the trigger

Dépendances

Ce composant nécessite les dépendances suivantes :

  • @radix-ui/react-tooltip

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité
  • Supporte les interactions clavier et souris
  • Positionnement automatique intelligent
  • Nécessite TooltipProvider au niveau de l'application