Bootstrap Bileşenler Tooltips

Bootstrap'un Tooltips bileşeni, bir öğenin üzerine gelindiğinde veya odaklanıldığında küçük bir bilgi balonu gösteren bir araçtır. Bu bileşen, kullanıcıya ek bilgi vermek veya açıklamalar sağlamak amacıyla kullanılır.

Temel Kullanım

Tooltips'i etkinleştirmek için, üzerinde gösterilecek olan öğeye data-bs-toggle="tooltip" özniteliği eklenir ve title özniteliği ile gösterilecek metin tanımlanır.

Örnek:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Bu bir tooltip!">
  Üzerine Gelin
</button>

Bu kod, fareyle butonun üzerine gelindiğinde "Bu bir tooltip!" mesajını gösterecektir.

JavaScript ile Etkinleştirme

Tooltips'in çalışması için JavaScript ile etkinleştirilmesi gerekir. Bunun için sayfanın başında aşağıdaki kodu çalıştırarak tüm tooltips'leri etkinleştirebilirsiniz:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Konumlandırma

Tooltips, varsayılan olarak öğenin üst kısmında görüntülenir. Konumlandırmayı değiştirmek için data-bs-placement özniteliği kullanılır. Desteklenen konumlar şunlardır: top, bottom, left, right.

Örnek:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Sağda görüntülenen tooltip">
  Sağdaki Tooltip
</button>

İleri Seçenekler

Tooltips'in görsel stilini veya davranışını değiştirmek için ek seçenekler mevcuttur:

• delay: Gecikme süresi ayarlayarak tooltip'in ne zaman görünüp kaybolacağını belirleyebilirsiniz.
• trigger: Tooltip'in nasıl tetikleneceğini (örn. hover, focus, click) belirleyebilirsiniz.
• html: Tooltip içeriğinin HTML olarak işlenip işlenmeyeceğini belirler (varsayılan false).

Tooltips, kullanıcı deneyimini artırmak için kullanışlı ve kolayca özelleştirilebilen bir Bootstrap bileşenidir.