Saf CSS Araç İpucu (Tooltip)

Sıfır JavaScript ile, yalnızca HTML ve CSS kullanılarak inşa edilmiş, son derece hafif ve kullanışlı bir araç ipucu (tooltip) bileşenidir. İlgili öğenin üzerine gelindiğinde (hover) yumuşak bir belirme efektiyle (fade-in) ortaya çıkar ve açıklayıcı metni hedefin hemen üzerinde şık bir şekilde sergiler.

Önizleme

Uygulama Kodu

Aşağıdaki kod parçacıklarını kopyalayıp projenize kolaylıkla entegre edebilirsiniz.

<!-- index.html -->
<div class="tooltip-wrapper">
  <button class="tooltip-trigger">Üzerime Gel</button>
  <div class="tooltip-content">
    Bu, tamamen CSS ile yapılmış bir araç ipucudur!
  </div>
</div>

/* styles.css */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-trigger {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background-color: #3b82f6;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.tooltip-trigger:hover {
  background-color: #2563eb;
}

.tooltip-content {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: #1f2937;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Aşağı Bakan Üçgen (Ok) */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

/* Vurgu (Hover) Durumundaki Hareket */
.tooltip-wrapper:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

Açıklama

1. position: relative ve position: absolute İlişkisi: Dış kapsayıcı konumundaki `tooltip-wrapper` öğesine `relative` değeri verilerek, asıl araç ipucu penceresinin (`tooltip-content`) bu kapsayıcıya göre tam isabetli bir mutlak konumlama (`absolute`) alması sağlanmıştır.
2. `visibility` ve `opacity` Kullanımı: CSS’te `display: none` uygulandığında CSS geçiş (transition) animasyonları devreye giremeyeceğinden, öğenin ilk gizli durumunu pürüzsüz animasyonlara hazır halde tutabilmek için `visibility: hidden` ve `opacity: 0` ikilisi tercih edilmiştir.
3. Pürüzsüz Süzülme Animasyonu: Araç ipucunun kapalı durumunda `transform: translateY(10px)` ile aşağı çekilmiş hali, kullanıcı `hover` yaptığında `translateY(0)` başlangıç konumuna getirilerek pencerenin aşağıdan yukarıya doğru zarifçe süzüldüğü bir animasyon hissiyatı verir.
4. Sadece CSS ile Üçgen Tasarımı: CSS’in `border` hilesi kullanılarak, araç ipucu penceresinin alt kısmında bulunan konuşma balonu kuyruğu (üçgen yapı), `.tooltip-content::after` sözde elemanı sayesinde fazladan resim kullanılmaksızın oluşturulmuştur.