Araç ipuçları

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 23 / 35.

Araç ipuçları (tooltips), bir kullanıcı bir arayüz öğesinin üzerine geldiğinde veya ona odaklandığında görünen küçük, bilgilendirici açılır öğelerdir. Ana kullanıcı arayüzünü karmaşıklaştırmadan ek bağlam sağlarlar.

HTML ve CSS kullanarak temel bir ipucu (tooltip) oluşturalım:

İlk olarak, HTML yapısını oluşturun:

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

Ardından, araç ipucunu (tooltip) konumlandırmak ve göstermek/gizlemek için CSS'i ekleyin:

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

.tooltip {
  visibility: hidden; 
  /* Position the tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Add a slight delay before showing */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Bu kodla, düğmenin üzerine geldiğinizde üzerinde bir araç ipucu belirecektir.

Görev

Kolay

Kullanıcı "Help" düğmesinin üzerine geldiğinde görünen bir araç ipucuna (tooltip) sahip bir HTML düğmesi size verilmiştir. Göreviniz:

Araç ipucunu varsayılan olarak gizleyin.
Öne çıkması için bir arka plan rengi ve metin rengi ekleyin.
Araç ipucunun içindeki metni ortalayın.
Araç ipucunun daha hoş görünmesi için biraz iç boşluk (padding) ekleyin.
border-radius ile köşeleri yuvarlayın.

Kopya kağıdı

Tooltip'ler (ipuçları), arayüz öğelerinin üzerine gelindiğinde görünen küçük, bilgilendirici açılır öğelerdir.

Temel HTML yapısı:

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

Tooltip'leri konumlandırmak ve göstermek/gizlemek için CSS:

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

.tooltip {
  visibility: hidden; 
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Kendin dene

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