Bootstrap 5 Popover
-
Popover يشبه tooltips الى حد كبير، ويمكن تعريفه على انه مربع منبثق pop-up يظهر عندما ينقر المستخدم على element. الفرق بينهم هو أن popover يمكن أن يحتوي على محتوى أكثر بكثير.
ملاحظة: تمام مثل tooltips يحتاج Popover الى اكواد Javascript حتى يشتغل.
تمام نطبق مثال حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container mt-3">
<h3>Popover Example</h3>
<button type="button" class="btn btn-warning" data-bs-toggle="popover" title="Popover Header" data-bs-content="Welcome, DevKum Team, popover sample ">
Click to toggle popover
</button>
</div>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll([data-bs-toggle="popover"]))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
النتيجة بتكون:
نفهم شو عملنا.
لإنشاء popover ، بنحتاج اضافة أضف attribute التالية إلى element:
data-bs-toggle = "popover"
بنستخدم title attribute لتحديد header text ل popover وفي مثالنا السابق اضفنا "title="Popover Header، وتستخدم data-bs-content attribute لتحديد النص الذي يجب عرضه داخل popover@@#s.
الكود:
<button type="button" class="btn btn-warning" data-bs-toggle="popover" title="Popover Header" data-bs-content="Welcome, DevKum Team, popover sample ">
Click to toggle popover
</button>
واكيد كود Javascript اجباري
الكود:
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll(@@#[data-bs-toggle="popover"]@@#))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
تماما مثل tooltip يمكن التحكم بمكان popover
تحديد المواقع PopoversPositioning Popovers
للتحكم بمكان popover بنستخدم attribute المسمى data-bs-placement. وبنطبق عليه المكان المطلوب. ويوجد 4 اماكن يمكن عرضها وهي :
top, bottom, left or the right
تمام نطبق المثال لفهم المضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container mt-3">
<h3>Popover Example</h3>
<button type="button" class="btn btn-warning" data-bs-toggle="popover" title="Popover Header" data-bs-content="Welcome, DevKum Team, popover sample ">
Click to toggle popover
</button>
<h3>Four directions with a tag</h3>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>
<h3>Four directions with button </h3>
<button type="button" class="btn btn-warning" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-warning" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-warning" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-warning" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button>
</div>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll(@@#[data-bs-toggle="popover"]@@#))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
النتيجة
ملاحظة: لا تعمل placement attributes بالشكل الذي تتوقعه إذا لم تكن هناك مساحة كافية لها. على سبيل المثال: إذا كنت تستخدم top placement في الجزء العلوي من الصفحة (حيث لا يوجد مكان لها) ، فسوف يعرض بدلاً من ذلك العنصر المنبثق أسفل العنصر أو على اليمين (أينما كان مكانًا مناسبًا له).
إغلاق Popovers
الوضع الافتراضي ل Popovers، يتم إغلاق Popovers عند النقر فوق العنصر مرة أخرى. ومع ذلك يمكن استخدام attribute التالية
data-bs-trigger="focus" الي بتعمل على اغلاق Popovers عند النقر في مكان ما خارج Popovers
نطبق مثال حتى نفهم الموضوع.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container mt-3">
<h3>Popover Example</h3>
<button type="button" class="btn btn-warning" data-bs-trigger="focus" data-bs-toggle="popover" title="Popover Header" data-bs-content="Welcome, DevKum Team, popover sample ">
Click to toggle popover
</button>
</div>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll(@@#[data-bs-toggle="popover"]@@#))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
النتيجة:
Hoverable Popover
يمكن عمل Popover بحيث تظهر عند تحريك المؤشر فوقها. ولعمل ذلك بنستخدم attribute المسمى data-bs-trigger مع تطبيق قيمة hover.
نطبق مثال على ذلك.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
<div class="container mt-3">
<h3>Popover Example</h3>
<button type="button" class="btn btn-warning" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover Header" data-bs-content="Welcome, DevKum Team, popover sample ">
Click to toggle popover
</button>
</div>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll(@@#[data-bs-toggle="popover"]@@#))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>
النتيجة:
اترك تعليقك