GratuitWeb
Bouton gris 3D avec effet au survol, par cssbuttons-io
- 386386 téléchargements
- 243243 mentions J'aime
- 153153 sauvegardes
Compatible avec
- Claude Code
- Codex
- Cursor
- et 3 autres
Infobulles Tailwind aux quatre positions v1.0.0
Utilisez cette ressource pour ajouter des infobulles positionnées autour d'un élément
Nouveau
- 536 téléchargements
- 124 mentions J'aime
- 125 sauvegardes
Gratuit
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install tailwind-tooltip-four-positionsPremière fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent reprend le modèle d'infobulle de la ressource, avec une flèche en losange, pour la position voulue. Tout se fait en classes Tailwind (group, hover). Vous obtenez des bulles d'aide propres, sans JavaScript.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Le modèle de votre agent
- Utilise
- Tailwind CSS
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitWeb
Bouton noir avec effet au survol « Massive Mayfly », par cssbuttons-io
- 334334 téléchargements
- 194194 mentions J'aime
- 201201 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton turquoise 3D avec effet au survol, par cssbuttons-io
- 336336 téléchargements
- 145145 mentions J'aime
- 207207 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Animation de chargement verte, par fanishah
- 381381 téléchargements
- 221221 mentions J'aime
- 209209 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton vert avec effet au survol, par cssbuttons-io
- 415415 téléchargements
- 153153 mentions J'aime
- 145145 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton blanc, par YUGE0
- 412412 téléchargements
- 193193 mentions J'aime
- 123123 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Bouton blanc 3D animé, par cssbuttons-io
- 366366 téléchargements
- 194194 mentions J'aime
- 202202 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
GratuitWeb
Carte blanche 3D avec effet au survol, par javierBarroso
- 388388 téléchargements
- 153153 mentions J'aime
- 193193 sauvegardes
Compatible avec- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- LISEZMOI.md en français : mode d'emploi pour intégrer l'animation
- Tooltips/ayman-ashine_terrible-puma-8.html : le HTML et le CSS du composant, à copier tels quels
- Les variables et sélecteurs à modifier pour adapter les couleurs et la taille
Pour qui
- Page produit avec détails au survol
- Barre d'outils d'une application
- Aide sur les champs d'un formulaire
Pas pour qui
- Projet sans Tailwind CSS
- Infobulle devant contenir des liens ou des boutons
Étiquettes
- infobulle
- tailwind
- survol
- aide
- ui
À propos
Vous dites
« Ajoute des infobulles à droite de chaque icône de ma barre latérale avec le modèle de la ressource. »
Composant publié par ayman-ashine sur Uiverse sous licence MIT, documenté en français par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Le texte de l'infobulle et L'élément à annoter
- Dépendances
- Tailwind CSS
Comment l'utiliser
- Donnez la ressource à votre agent de code
- Demandez-lui d'insérer le composant à l'endroit voulu et d'adapter textes et couleurs
- Ouvrez la page et vérifiez le rendu au survol et sur mobile
Aperçu du contenu
Fichiers
- LICENSE1,1 Ko
- LISEZMOI.md0,9 Ko
- NOTICE-PALATEKIT.md0,5 Ko
- Tooltips/ayman-ashine_terrible-puma-8.html1,9 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- ayman-ashine
- Source
- github.com/uiverse-io/galaxy/tree/adbd2adde0a299a3956ea288fb444ec01891ca41/Tooltips/ayman-ashine_terrible-puma-8.html
- Licence
- MIT
Notice
Version modifiée de « ayman-ashine_terrible-puma-8 » (ayman-ashine, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Comment l'intégrer dans mon site ?
Copiez le HTML dans votre page. Le style repose sur des classes Tailwind CSS : votre projet doit déjà utiliser Tailwind.
Comment personnaliser le rendu ?
Modifiez les couleurs sont des classes Tailwind (bg-zinc-800, text-zinc-400, bg-zinc-300) à remplacer ; la position se choisit en gardant l'un des quatre blocs. Pour respecter les visiteurs sensibles aux animations, entourez-les d'une règle @media (prefers-reduced-motion: no-preference).