Suggerimenti

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 23 di 35.

I tooltip sono piccoli elementi informativi a comparsa che appaiono quando un utente passa il cursore su un elemento dell’interfaccia o vi porta il focus. Forniscono ulteriore contesto senza ingombrare l’interfaccia principale.

Creiamo un tooltip di base usando HTML e CSS:

Per prima cosa, crea la struttura HTML:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

Successivamente, aggiungi il CSS per posizionare e mostrare/nascondere il tooltip:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  /* Posiziona il tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Aggiungi un leggero ritardo prima di mostrarlo */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Mostra il tooltip quando il puntatore è sopra il contenitore */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Con questo codice, quando passi il cursore sul pulsante, sopra di esso apparirà una descrizione.

Sfida

Facile

Ti viene fornito un pulsante HTML con un tooltip che appare quando l’utente passa il puntatore sopra il pulsante "Help". Il tuo compito:

Nascondi il tooltip per impostazione predefinita.
Aggiungi un colore di sfondo e un colore del testo per farlo risaltare.
Centra il testo all’interno del tooltip.
Aggiungi un po’ di spaziatura interna per rendere più gradevole l’aspetto del tooltip.
Arrotonda gli angoli con border-radius.

Provalo tu

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>