ส่วนประกอบ Popover คล้ายกับคำแนะนำเครื่องมือ เป็นกล่องป๊อปอัปที่ปรากฏขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ ความแตกต่างก็คือป๊อปโอเวอร์สามารถมีเนื้อหาได้มากกว่ามาก
หากต้องการสร้างป๊อปโอเวอร์ ให้เพิ่มแอตทริบิวต์ data-bs-toggle="popover" ให้กับองค์ประกอบ
ใช้แอตทริบิวต์ title เพื่อระบุข้อความส่วนหัวของป๊อปโอเวอร์ และใช้แอตทริบิวต์ data-bs-content เพื่อระบุข้อความที่ควรแสดงภายในเนื้อหาของป๊อปโอเวอร์:
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">Toggle popover</button>หมายเหตุ: Popovers ต้องเริ่มต้นด้วย JavaScript จึงจะทำงานได้
รหัสต่อไปนี้จะเปิดใช้งานป๊อปโอเวอร์ทั้งหมดในเอกสาร:
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>ลองด้วยตัวคุณเอง →
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Popover Example</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">
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>
ตามค่าเริ่มต้น หน้าต่างป๊อปโอเวอร์จะปรากฏที่ด้านขวาขององค์ประกอบ
ใช้แอตทริบิวต์ data-bs-placement เพื่อกำหนดตำแหน่งของป๊อปโอเวอร์ที่ด้านบน ด้านล่าง ซ้าย หรือด้านขวาขององค์ประกอบ:
<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>ลองด้วยตัวคุณเอง →
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h3>Popover Positioning</h3>
<p>Click on the links to see the popover in action:</p>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Content">Right</a>
</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>
หมายเหตุ: แอตทริบิวต์ตำแหน่งจะไม่ทำงานตามที่คุณคาดหวังหากมีพื้นที่ไม่เพียงพอสำหรับแอตทริบิวต์เหล่านั้น ตัวอย่างเช่น หากคุณใช้ตำแหน่งบนสุดที่ด้านบนของหน้า (โดยที่ไม่มีที่ว่าง) ตำแหน่งนั้นจะแสดงป๊อปโอเวอร์ด้านล่างองค์ประกอบหรือทางด้านขวาแทน (ไม่ว่าจะอยู่ที่ใดก็ตาม)
ตามค่าเริ่มต้น หน้าต่างป๊อปโอเวอร์จะถูกปิดเมื่อคุณคลิกที่องค์ประกอบอีกครั้ง อย่างไรก็ตาม คุณสามารถใช้แอตทริบิวต์ data-bs-trigger="focus" ซึ่งจะปิดป๊อปโอเวอร์เมื่อคลิกภายนอกองค์ประกอบ:
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>ลองด้วยตัวคุณเอง →
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Dismissible Popover</h3>
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
</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>
เคล็ดลับ: หากคุณต้องการให้ป๊อปโอเวอร์ปรากฏขึ้นเมื่อคุณเลื่อนตัวชี้เมาส์ไปเหนือองค์ประกอบ ให้ใช้แอตทริบิวต์ data-bs-trigger พร้อมด้วย ค่าของ "โฮเวอร์":
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>ลองด้วยตัวคุณเอง →
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Hoverable Popover</h3>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
</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>