ปลั๊กอิน Bootstrap Popover
ปลั๊กอิน Popover
ปลั๊กอิน Popover นั้นคล้ายกับคำแนะนำเครื่องมือ เป็นกล่องป๊อปอัปที่ปรากฏขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ ความแตกต่างก็คือป๊อปโอเวอร์สามารถมีเนื้อหาได้มากขึ้น
เคล็ดลับ: สามารถรวมปลั๊กอินแยกกันได้ (โดยใช้ไฟล์ "popover.js" ของ Bootstrap) หรือรวมเข้าด้วยกัน (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js")
วิธีสร้างป๊อปโอเวอร์
หากต้องการสร้างป๊อปโอเวอร์ ให้เพิ่ม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>
เคล็ดลับ:คุณยังสามารถใช้แอตทริบิวต์ data-placement ด้วยค่า "auto" ซึ่งจะทำให้เบราว์เซอร์กำหนดตำแหน่งของป๊อปโอเวอร์ได้ ตัวอย่างเช่น หากค่าเป็น "ซ้ายอัตโนมัติ" ป๊อปโอเวอร์จะแสดงทางด้านซ้ายเมื่อเป็นไปได้ ไม่เช่นนั้นจะอยู่ที่ด้านขวา
ปิด 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ของเรา