Variante sobre de TooltipTerm avec un style neutre et un positionnement relatif. Ideal pour les definitions discretes dans le corps du texte, sans attirer excessivement l'attention.
Note : Contrairement a TooltipTerm, WikiTerm utilise un positionnement absolute (relatif au parent) au lieu d'un portal. Pas de dependance a createPortal.
Pour ameliorer votre TPS, entrainez-vous regulierement avec le timer.
import { WikiTerm, WikiTerms } from "@/components/ui/wiki-term"
// Usage inline discret
<p>
Pour ameliorer votre <WikiTerms.TPS />, entrainez-vous
regulierement avec le timer.
</p>
// Usage direct
<WikiTerm
term="Finger Tricks"
explanation="Techniques optimisees pour minimiser les mouvements..."
>
finger tricks
</WikiTerm>
// Avec style personnalise
<WikiTerm
term="Cross"
explanation="Premiere etape CFOP..."
className="font-medium text-primary"
/>Composants pre-configures avec des explications concises pour les termes speedcubing.
| Preset | Affichage | Description |
|---|---|---|
| WikiTerms.TPS | TPS | Turns Per Second |
| WikiTerms.PB | PB | Personal Best |
| WikiTerms.Scramble | scramble | Melange du cube |
| WikiTerms.Inspection | inspection | Phase d'observation |
| WikiTerms.AverageOf5 | Ao5 | Average of 5 |
| WikiTerms.AverageOf12 | Ao12 | Average of 12 |
| WikiTerms.FingerTricks | finger tricks | Techniques de doigts |
| WikiTerms.SubGoals | sub-goals | Objectifs de temps |
| Prop | Type | Default | Description |
|---|---|---|---|
| term | string | — | Le terme a afficher. Utilise comme titre dans le tooltip et pour generer l'ID aria. |
| explanation | string | — | Texte explicatif affiche dans le corps du tooltip. |
| children | ReactNode | — | Contenu personnalise. Permet d'afficher un texte different du terme (ex: 'ma moyenne' au lieu de 'Ao5'). |
| className | string | — | Classes CSS additionnelles appliquees au span declencheur. |
| Dependance | Raison |
|---|---|
| cn (utils) | Fusion conditionnelle des classes CSS (clsx + tailwind-merge). |
role="button" et tabIndex=0 pour la navigation clavier.aria-describedby relie le declencheur au tooltip via un ID unique genere a partir du terme.onFocus / onBlur.