Aller au contenu
Patrick Junod Patrick Junod

Créer une Tooltip avec uniquement du CSS

Dans le cadre d'un projet, j'ai eu besoin d'un système de tooltip simple et efficace. J'avais déjà entendu parlé de systèmes réalisés en CSS uniquement et me suis donc intéressé à la chose. Il se trouve que réaliser une tooltip uniquement en CSS est relativement simple.
•
CSS Programmation
Retour au blog

1. Préparation du HTML

Notre tooltip va utiliser le principe des data attributes. Attributs disponibles en html du type data-XXX où XXX est le nom de la variable que vous souhaitez créer. Ce système très simple va nous être utile pour y stocker le texte à afficher dans la tooltip. Un avantage de cette solution est que les données de votre tooltip seront stockés au même endroit que la balise déclenchant cette dernière.

On commence donc par écrire notre HTML. Le <span> contenant la class tooltip-link sera utilisé comme ancre pour déclencher la tooltip.

<div class="container">
  <div>Hover <span class="tooltip-link" data-tooltip="This is a tooltip test with a huge text, wow that's big!">here</span> to see the result</div>
</div>

2. On y ajoute notre code CSS de base afin d'avoir une belle interface

body {
  min-height: 100vh;
  background: orange;
  color: white;
  font-family: "Satoshi", "Inter", sans-serif;
  font-size: 20px;
}
.container div {
   width: 100%;
   max-width: 30%;
   margin: 5px;
}
.container {
  width: 100%;
  height:500px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.tooltip-link {
  cursor: help;
  position: relative;
  text-decoration: underline;
}

3. Puis enfin la logique de notre tooltip

Pour aller au plus simple, définir l'action sur le pseudo élément :hover et :after permet de garder le code conscis et ne requiert aucun Javascript pour déclencher l'affichage de la tooltip.

Notez dans le code qui suit l'utilisation de la variable

content: attr(data-tooltip);

qui nous permet de récupérer le contenu de l'attribut expliqué en introduction.

.tooltip-link:hover::after {
    position: absolute;
    opacity: 0;
    content: attr(data-tooltip);
    bottom: 0%;
    animation: fadeIn 100ms cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
    left: 50%;
    animation-delay: 100ms;
    color: #707070;
    background: #ffffff;
    border-radius: 20px;
    min-width: 200px;
    max-width; 100%;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    padding: 10px;
    box-shadow: 0px 10px 33px #3333332e;
}

On y intègre aussi une animation définie par les keyframes ci-dessous et la fonction cubic-bezier donnant un effet de rebondissement à l'arrivée de la tooltip:

@keyframes fadeIn {
  0% {
    opacity:0;
    transform: translate(-50%, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -30px);
  }
}

4. Résultat: