Qu'est-ce qu'un tooltip et pourquoi en CSS pur ?
Un tooltip (info-bulle) est un petit élément d'interface qui apparaît au survol ou au focus d'un élément pour fournir des informations complémentaires. Créer des tooltips en CSS pur présente plusieurs avantages : aucune dépendance JavaScript, meilleure performance, et un code plus léger et maintenable.
Tooltip de base en CSS pur
Le HTML
Survolez-moi
Voici le tooltip !
Le CSS avec data-attribute
/* Tooltip avec data-tooltip attribute */
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 8px 12px;
background: #333;
color: white;
font-size: 0.85rem;
line-height: 1.4;
white-space: nowrap;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
z-index: 1000;
}
/* Flèche du tooltip */
.tooltip::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
z-index: 1000;
}
/* Afficher au survol */
.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:focus::after,
.tooltip:focus::before {
opacity: 1;
visibility: visible;
}Tooltips positionnels (haut, bas, gauche, droite)
/* Tooltip en haut (par défaut) */
.tooltip-top::after {
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
.tooltip-top::before {
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border-top-color: #333;
}
/* Tooltip en bas */
.tooltip-bottom::after {
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
.tooltip-bottom::before {
top: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: #333;
}
/* Tooltip à gauche */
.tooltip-left::after {
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
}
.tooltip-left::before {
right: calc(100% + 2px);
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: #333;
}
/* Tooltip à droite */
.tooltip-right::after {
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
}
.tooltip-right::before {
left: calc(100% + 2px);
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-right-color: #333;
}Tooltips animés
Tooltip avec fade + slide
.tooltip-animated::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(5px);
padding: 8px 14px;
background: #2c3e50;
color: white;
font-size: 0.85rem;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
pointer-events: none;
white-space: nowrap;
}
.tooltip-animated:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}Tooltip avec scale (effet zoom)
.tooltip-scale::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) scale(0.8);
transform-origin: bottom center;
padding: 8px 14px;
background: #333;
color: white;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.tooltip-scale:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
}Tooltips multilignes et avec HTML riche
/* Pour les tooltips longs, autoriser le retour à la ligne */
.tooltip-multiline::after {
content: attr(data-tooltip);
white-space: normal;
width: 250px;
text-align: left;
line-height: 1.5;
}
/* Tooltip avec span interne (permet du HTML) */
.tooltip-rich {
position: relative;
}
.tooltip-rich .tooltip-content {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
width: 300px;
padding: 1rem;
background: white;
color: #333;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
z-index: 1000;
}
.tooltip-rich:hover .tooltip-content {
opacity: 1;
visibility: visible;
pointer-events: auto; /* Permet d'interagir avec le contenu */
}Tooltips avec thèmes de couleurs
/* Variantes de couleurs */
.tooltip-success::after { background: #27ae60; }
.tooltip-success::before { border-top-color: #27ae60; }
.tooltip-warning::after { background: #f39c12; color: #333; }
.tooltip-warning::before { border-top-color: #f39c12; }
.tooltip-danger::after { background: #e74c3c; }
.tooltip-danger::before { border-top-color: #e74c3c; }
.tooltip-info::after { background: #3498db; }
.tooltip-info::before { border-top-color: #3498db; }
/* Tooltip glassmorphism */
.tooltip-glass::after {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
}Accessibilité des tooltips
Un tooltip accessible doit fonctionner au clavier et être compris par les lecteurs d'écran :
Enregistrer le fichier sur le serveur
/* Afficher aussi au focus (navigation clavier) */
.tooltip:focus::after,
.tooltip:focus::before,
.tooltip:focus-visible::after,
.tooltip:focus-visible::before {
opacity: 1;
visibility: visible;
}
/* Respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.tooltip::after, .tooltip::before {
transition: none;
}
}Système de tooltip complet prêt à l'emploi
/* === SYSTÈME TOOLTIP TOURAK DIGITAL === */
[data-tooltip] {
position: relative;
cursor: help;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
padding: 6px 12px;
background: #1e293b;
color: #f8fafc;
font-size: 0.8rem;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
z-index: 9999;
}
[data-tooltip]::before {
content: '';
position: absolute;
border: 5px solid transparent;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
z-index: 9999;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
opacity: 1;
visibility: visible;
}
/* Position par défaut : haut */
[data-tooltip]:not([data-position])::after,
[data-tooltip][data-position="top"]::after {
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
[data-tooltip]:not([data-position])::before,
[data-tooltip][data-position="top"]::before {
bottom: calc(100% + -2px);
left: 50%;
transform: translateX(-50%);
border-top-color: #1e293b;
}Conclusion
Les tooltips CSS purs sont une solution élégante et performante pour enrichir votre interface. Avec les pseudo-éléments, les data-attributes et quelques lignes de CSS, vous pouvez créer des infobulles animées, accessibles et entièrement personnalisables sans aucune dépendance JavaScript.
Chez Tourak Digital, nous intégrons des composants d'interface soignés et accessibles dans chaque projet. Contactez-nous pour un site web aux finitions impeccables.