Araç ipuçları

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 23 / 35.

Araç ipuçları, bir kullanıcı bir arayüz öğesinin üzerine geldiğinde veya bu öğeye 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 araç ipucu oluşturalım:

Öncelikle 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 konumlandırmak ve göstermek/gizlemek için CSS'i ekleyin:

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

.tooltip {
  visibility: hidden; 
  /* Tooltip'i konumlandır */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Göstermeden önce hafif bir gecikme ekle */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Konteynerin üzerine gelindiğinde tooltip'i göster */
.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 araç ipucuna sahip bir HTML düğmesi veriliyor. Görevin:

Araç ipucunu varsayılan olarak gizlemek.
Öne çıkması için bir arka plan rengi ve metin rengi eklemek.
Araç ipucunun içindeki metni ortalamak.
Araç ipucunun daha hoş görünmesi için biraz dolgu eklemek.
border-radius ile köşeleri yuvarlamak.

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>