Bootstrap 5 Çıkıntı Penceresi

Açılır pencere

Açılır pencere (Popover) bileşeni, araç ipucularına benzer; kullanıcı tıkladığında görüntülenen bir açılır penceredir. Fark, açılır pencerenin daha fazla içerik içerebilmesi yönüdür.

Açılır pencere nasıl oluşturulur

Açılır pencere oluşturmak için data-bs-toggle="popover" özniteliğini elemana ekler.

Kullanın title Öznitelik, açılır pencerenin başlık metnini belirler ve data-bs-content Öznitelik, açılır pencere metninde görüntülenen metni belirler:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Açılır pencere başlığı" data-bs-content="Açılır pencere içindeki bazı içerikler">Açılır pencereyi aç/kapat</button>

Dikkat:Açılır pencereler çalışabilmesi için JavaScript ile başlatılmalıdır.

Aşağıdaki kod, belgedeki tüm açılır pencereleri etkinleştirir:

Örnek

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Kendi Kendine Deneyin

Açılır pencereyi konumlandırma

Varsayılan olarak, açılır pencere elemanın sağında görüntülenir.

Kullanın data-bs-placement Öznitelik ayarları, açılır pencerenin elemanın üstü, altı, solunda veya sağında konumunu belirler:

Örnek

<a href="#" title="Başlık" data-bs-toggle="popover" data-bs-placement="top" data-content="İçerik">Üst</a>
<a href="#" title="Başlık" data-bs-toggle="popover" data-bs-placement="bottom" data-content="İçerik">Alt</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="İçerik">Sol</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="İçerik">Sağ</a>

Kendi Kendine Deneyin

Dikkat:Yeterli alan olmamışsa, placement özelliği beklendiği gibi çalışmaz. Örneğin: Sayfa üstünde (rezerveli alan yoksa) top placement özelliği kullanırsanız, açılır pencere elementin altında veya sağında (herhangi bir boş alan) görüntülenir.

Açılır Pencereyi Kapat

Varsayılan olarak, elemente yeniden tıklama yapıldığında açılır pencere kapanır. Ancak, bu özelliği kullanabilirsiniz data-bs-trigger="focus" Özellik, bu özelliği kullanarak elementin dışında tıklama yaparken açılır pencerenin kapanmasını ayarlayabilirsiniz:

Örnek

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Bu açılır pencereyi kapatmak için belge içindeki herhangi bir yere tıklayabilirsiniz">Bana Tıklayın</a>

Kendi Kendine Deneyin

Fare Üzerinde Açılır Pencere

İpucu:Fare işaretçisini elemente hareket ettirdiğinizde açılır pencere görüntülemek istiyorsanız, değerini kullanın "hover" nın data-bs-trigger Özellikler:

Örnek

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Açılır Metin">Yukarıda Üzerine Bırakın</a>

Kendi Kendine Deneyin