Podpowiedzi

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 23 z 35.

Podpowiedzi to małe, informacyjne wyskakujące elementy, które pojawiają się, gdy użytkownik najedzie kursorem na element interfejsu lub ustawi na nim fokus. Zapewniają dodatkowy kontekst, nie zaśmiecając głównego interfejsu użytkownika.

Stwórzmy podstawową podpowiedź za pomocą HTML i CSS:

Najpierw utwórz strukturę HTML:

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

Następnie dodaj CSS, aby ustawić pozycję podpowiedzi i kontrolować jej widoczność:

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

.tooltip {
  visibility: hidden; 
  /* Ustaw pozycję podpowiedzi */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Dodaj niewielkie opóźnienie przed wyświetleniem */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Wyświetl podpowiedź po najechaniu kursorem na kontener */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Po najechaniu kursorem na przycisk za pomocą tego kodu nad nim pojawi się podpowiedź.

Wyzwanie

Łatwy

Masz podany przycisk HTML z podpowiedzią, która pojawia się, gdy użytkownik najedzie kursorem na przycisk "Help". Twoje zadanie:

Domyślnie ukryj podpowiedź.
Dodaj kolor tła i kolor tekstu, aby była dobrze widoczna.
Wyśrodkuj tekst wewnątrz podpowiedzi.
Dodaj trochę wewnętrznego odstępu, aby podpowiedź wyglądała lepiej.
Zaokrąglij rogi za pomocą border-radius.

Spróbuj swoich sił

<!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>