JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="infobulle" aria-label="Fermer">coucou</div>

CSS

.infobulle {
  position: relative;
  display:inline-block;
  margin:50px;
}
.infobulle::after {
  opacity: 0;
  transition: opacity 1s ease;
  content: attr(aria-label); 
  position: absolute;
  top: -100%;
  left: 100%;
  z-index: 1; 
  white-space: nowrap; 
  padding: 0px 16px;
  background-color: rgba(0, 105, 151, 0.53);
  border-radius: 2px;
  font-size: 1.5rem;
  color: #fff;
  text-transform: none !important;
  font-family: 'Montserrat' !important;
  font-weight: 400 !important;
}
.infobulle:hover::after,
.infobulle:focus::after {
  opacity: 1;
}
[aria-label]::before,
[aria-label]::before {
  content: "?";
  position: absolute;
  top: -0.6em;
  left: 95%;
  transform: translateX(-50%); 
  font-size: 20px;
  color: rgba(0, 105, 151, 0.53);
  outline: none;
  opacity: 0;
  transition: opacity 1s ease;
}

[aria-label]:hover::before,
[aria-label]:focus::before {
  opacity: 1;
}