Affiche un terme speedcubing avec un style bleu distinct et un tooltip explicatif au survol. Utilise un portal pour le positionnement du tooltip, ce qui evite les problemes de debordement dans les conteneurs.
Note : Le composant reel utilise createPortal pour rendre le tooltip dans document.body. Les mockups ci-dessous reproduisent ce comportement.
Mon TPS est de 8.5 mouvements par seconde.
import { TooltipTerm, SpeedcubeTerms } from "@/components/ui/tooltip-term"
// Usage inline dans du texte
<p>
Mon <SpeedcubeTerms.TPS /> est de 8.5 mouvements par seconde.
</p>
// Usage direct avec parametres
<TooltipTerm
term="Cross"
explanation="Premiere etape de la methode CFOP..."
/>
// Sans icone d'aide
<TooltipTerm term="PB" explanation="..." showIcon={false} />Composants pre-configures pour les termes speedcubing les plus courants. Chaque preset encapsule le terme et son explication.
| Preset | Terme | Description |
|---|---|---|
| SpeedcubeTerms.TPS | TPS | Turns Per Second |
| SpeedcubeTerms.AverageOf5 | Ao5 | Average of 5 |
| SpeedcubeTerms.AverageOf12 | Ao12 | Average of 12 |
| SpeedcubeTerms.PB | PB | Personal Best |
| SpeedcubeTerms.SubGoals | Sub-goals | Objectifs de temps |
| SpeedcubeTerms.FingerTricks | Finger Tricks | Techniques de doigts |
| SpeedcubeTerms.Scramble | Scramble | Melange du cube |
| SpeedcubeTerms.Inspection | Inspection | Phase d'observation (15s) |
| SpeedcubeTerms.CrossSolving | Cross | Premiere etape CFOP |
| SpeedcubeTerms.AlgorithmDrills | Algorithm Drills | Exercices d'algorithmes |
| Prop | Type | Default | Description |
|---|---|---|---|
| term | string | — | Le terme speedcubing a afficher. Utilise comme titre dans le tooltip. |
| explanation | string | — | Texte explicatif affiche dans le corps du tooltip. |
| children | ReactNode | — | Contenu personnalise a afficher a la place du terme. Permet d'ecrire 'ma moyenne' au lieu de 'Ao5'. |
| showIcon | boolean | true | Affiche l'icone HelpCircle a cote du terme. |
| Dependance | Raison |
|---|---|
| createPortal | Rend le tooltip dans document.body pour eviter les problemes de z-index/overflow. |
| HelpCircle (lucide) | Icone d'aide affichee a cote du terme. |
| Critere | TooltipTerm | WikiTerm |
|---|---|---|
| Style | Bleu prononce, fond colore | Neutre, souligne discret |
| Icone | HelpCircle (optionnelle) | Aucune |
| Positionnement | Portal (fixed, z-9999) | Relatif (absolute, z-50) |
| Usage typique | Termes techniques importants | Definitions discretes dans le texte |