Softonic

Générateur de Tooltip CSS

Étape 1 / 2
Suivant

Les tooltips sont souvent le premier endroit où un projet se tourne vers une bibliothèque JavaScript, mais un simple pseudo-élément ::after piloté par un attribut data-tooltip couvre 90 % des cas réels. Ce générateur produit les règles exactes .tooltip et .tooltip::after dont vous avez besoin, choisissez une position en haut, en bas, à gauche ou à droite, ajustez la couleur de fond et la couleur du texte, puis copiez le bloc dans votre feuille de style.

Comment intégrer le tooltip dans votre HTML

  1. 1

    Choisissez une position

    Haut, bas, gauche ou droite. Le générateur utilise `calc(100% + 8px)` plus la bonne transformation pour que la bulle soit bien alignée avec le déclencheur.

  2. 2

    Choisissez des couleurs

    La couleur de fond détermine la bulle, la couleur du texte est appliquée à l'étiquette du tooltip. Maintenez un contraste de 4.5:1 ou mieux pour la lisibilité.

  3. 3

    Copiez le CSS

    Collez le bloc généré dans votre feuille de style. Il fournit `.tooltip`, `.tooltip::after` et une règle `:hover`.

  4. 4

    Marquez le déclencheur

    Ajoutez `class="tooltip" data-tooltip="Votre texte"` à tout élément. Le `::after` lit l'attribut via `content: attr(data-tooltip)`.

Tooltips CSS pur : ce que vous gagnez et ce que vous abandonnez

Un tooltip uniquement en CSS est petit, rapide et fonctionne avec JavaScript désactivé. Cependant, il vit à l’intérieur de l’ordre source du DOM et hérite donc de certaines contraintes que vous devez concevoir autour.

Ce que fait le CSS généré

  • Définit le déclencheur à position: relative afin que le tooltip absolu y soit ancré.
  • Tire l’étiquette de content: attr(data-tooltip), ce qui signifie que vous ne dupliquez jamais le texte.
  • Anime l’opacité avec transition: opacity 0.15s, de sorte que l’apparition soit rapide mais pas abrupte.
  • Utilise pointer-events: none sur la bulle afin qu’elle ne bloque jamais les clics sur le déclencheur.

Mathématiques de positionnement

Position Règle d’offset
haut bottom: calc(100% + 8px); left: 50%; translateX(-50%)
bas top: calc(100% + 8px); left: 50%; translateX(-50%)
gauche right: calc(100% + 8px); top: 50%; translateY(-50%)
droite left: calc(100% + 8px); top: 50%; translateY(-50%)

Précautions d’accessibilité

  • data-tooltip n’est pas lu par les lecteurs d’écran. Si l’information est essentielle, associez-la à aria-label ou à un texte visible.
  • Les utilisateurs de clavier ont besoin de :focus-visible ainsi que de :hover. Étendez la règle générée à .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Les tooltips coupés par overflow: hidden sur un ancêtre disparaîtront. Déplacez le déclencheur hors du conteneur de découpe ou passez à un popover rendu par JS pour des interfaces denses.

Questions fréquentes

Un pseudo-élément garde le DOM propre, évite de dupliquer le texte de l’étiquette et vous permet de styliser le tooltip sans vous soucier de correspondre accidentellement à d’autres éléments. Le coût est que le contenu de ::after ne peut pas être indexé par la technologie d’assistance, donc renforcez le texte critique avec aria-label.

Oui, ajoutez un deuxième pseudo-élément, par exemple .tooltip::before, façonné avec une boîte de largeur/hauteur nulle et des bordures colorées. C’est un classique truc de triangle CSS ; le générateur de triangle CSS dans cette suite produit les déclarations de bord exactes dont vous avez besoin.

Ajoutez transition-delay: 0.3s à la règle ::after mais réinitialisez-la à zéro lors du survol sortant, ou utilisez transition: opacity 0.15s 0.3s; pour retarder l’apparition sans retarder le rejet.

La position et les couleurs que vous choisissez sont envoyées à notre serveur pour générer le CSS, mais elles ne sont ni stockées ni réutilisées. Sur la page en plusieurs étapes, elles transitent par le lien entre les étapes ; sur la page en une seule étape, rien n’est conservé.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues