Bootstrap Popover, kullanıcı etkileşimi sırasında daha fazla bilgi veya içerik sağlamak için kullanılan küçük bilgi baloncuklarıdır. Genellikle, bir öğeye tıklanarak veya üzerine gelindiğinde açılır ve ek bilgiler sunar. Popover'lar, formlar, düğmeler veya bağlantılar gibi çeşitli bileşenlerle kullanılabilir.
Bootstrap Popover Özellikleri
- Bilgi Sunumu: Kullanıcılara belirli bir öğe hakkında ek bilgi verir.
- Duyarlı Tasarım: Mobil ve masaüstü cihazlarda iyi bir kullanıcı deneyimi sunar.
- Farklı Konumlar: Popover'lar, yukarıda, aşağıda, sağda veya solda açılabilir.
- Kullanıcı Etkileşimi: Tıklama, fare ile üzerine gelme gibi kullanıcı etkileşimlerine dayalı olarak açılabilir.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir Popover örneği verilmiştir. Bu örnek, bir düğmeye tıklanarak bilgi balonunun açılmasını sağlamaktadır.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Popover Örneği</title>
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Popover Örneği</h2>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Başlık" data-bs-content="Bu, popover içeriktir.">
Bilgi Al
</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
<script>
$(function (
) {
// Popover'ı başlat
$('[data-bs-toggle="popover"]').popover();
});
</script>
</body>
</html>
Açıklama
-
Popover Yapısı:
-
<button>: Popover'ın tetikleyicisi olan düğme.data-bs-toggle="popover"özelliği, bu düğmeye tıklandığında popover'ın açılacağını belirtir. -
title: Popover'ın üst kısmında gösterilecek başlık. -
data-bs-content: Popover'ın içinde gösterilecek içerik. Bu, kullanıcıya ek bilgi sağlar.
-
-
JavaScript Kodu:
-
$(function () { ... });: Sayfa yüklendiğinde çalışacak bir jQuery işlevi. Burada, popover'ı başlatmak için kullanılır.
-
Önemli Notlar
- Popover'lar, kullanıcıların belirli bir öğe hakkında daha fazla bilgi almasına olanak tanır, bu da kullanıcı deneyimini artırabilir.
- Popover'ın açılma konumunu ayarlamak için
data-bs-placementözelliğini kullanabilirsiniz. Örneğin,data-bs-placement="right"ile sağda açılmasını sağlayabilirsiniz. - Popover'lar, gerektiğinde kapatılabilir. Kullanıcı popover'a tıkladığında veya sayfanın dışına tıkladığında otomatik olarak kapanabilir.
Bootstrap Popover, kullanıcıların ihtiyaç duyduğu ek bilgileri sağlamanın etkili bir yoludur. Kullanıcı arayüzünü daha etkileşimli hale getirir ve kullanıcı deneyimini geliştirir.