Bootstrap 4 Popover
Bootstrap 4 Popover
คอมโพเนนต์ Popover นั้นคล้ายกับคำแนะนำเครื่องมือ เป็นกล่องป๊อปอัปที่ปรากฏขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ ความแตกต่างก็คือป๊อปโอเวอร์สามารถมีเนื้อหาได้มากขึ้น
สลับป๊อปอัปวิธีสร้างป๊อปโอเวอร์
หากต้องการสร้างป๊อปโอเวอร์ ให้เพิ่มdata-toggle="popover"
แอตทริบิวต์ลงในองค์ประกอบ
ใช้titleแอตทริบิวต์เพื่อระบุข้อความส่วนหัวของป๊อปโอเวอร์ และใช้data-contentแอตทริบิวต์เพื่อระบุข้อความที่ควรจะแสดงภายในเนื้อหาของป๊อปโอเวอร์:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
หมายเหตุ:ต้องเริ่มต้น Popovers ด้วย jQuery: เลือกองค์ประกอบที่ระบุและเรียกใช้popover()เมธอด
รหัสต่อไปนี้จะเปิดใช้งานป๊อปอัปทั้งหมดในเอกสาร:
ตัวอย่าง
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
การวางตำแหน่ง Popovers
โดยค่าเริ่มต้น ป๊อปโอเวอร์จะปรากฏที่ด้านขวาขององค์ประกอบ
ใช้data-placementแอตทริบิวต์เพื่อกำหนดตำแหน่งของป๊อปโอเวอร์ที่ด้านบน ด้านล่าง ด้านซ้ายหรือด้านขวาขององค์ประกอบ:
ตัวอย่าง
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
หมายเหตุ:แอตทริบิวต์ตำแหน่งไม่ทำงานตามที่คุณคาดหวัง หากไม่มีที่ว่างเพียงพอสำหรับแอตทริบิวต์เหล่านี้ ตัวอย่างเช่น หากคุณใช้ตำแหน่งบนสุดที่ด้านบนของหน้า (ซึ่งไม่มีที่ว่างสำหรับหน้านั้น) ระบบจะแสดงป๊อปโอเวอร์ด้านล่างองค์ประกอบหรือทางขวาแทน (ไม่ว่าจะอยู่ที่ใด)
ปิด Popovers
โดยค่าเริ่มต้น ป๊อปโอเวอร์จะปิดเมื่อคุณคลิกที่องค์ประกอบอีกครั้ง อย่างไรก็ตาม คุณสามารถใช้data-trigger="focus"แอตทริบิวต์ที่จะปิดป๊อปโอเวอร์เมื่อคลิกภายนอกองค์ประกอบ:
ตัวอย่าง
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
เคล็ดลับ:หากคุณต้องการให้ป๊อปโอเวอร์แสดงเมื่อคุณเลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ ให้ใช้data-triggerแอตทริบิวต์ที่มีค่า "โฮเวอร์":
ตัวอย่าง
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
อ้างอิง Bootstrap Popover ที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกป๊อปโอเวอร์ เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Popover Referenceของเรา