Popover ปลั๊กอิน
Popover ปลั๊กอินคล้ายกับคำแนะนำเครื่องมือ; มันเป็นกล่องป๊อปอัพที่ปรากฏขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ ความแตกต่างคือว่า popover สามารถมีเนื้อหามากขึ้น
เคล็ดลับ: ปลั๊กอินสามารถรวมเป็นรายบุคคล (โดยใช้ Bootstrap's แต่ละบุคคล "popover.js" ไฟล์) หรือทั้งหมดในครั้งเดียว (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js" )
วิธีการสร้าง Popover
เพื่อสร้าง popover เพิ่ม data-toggle="popover" แอตทริบิวต์องค์ประกอบ
ใช้ title แอตทริบิวต์เพื่อระบุข้อความส่วนหัวของ popover และใช้ data-content แอตทริบิวต์การระบุข้อความที่ควรจะแสดงภายใน popover's ร่างกาย:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> หมายเหตุ: Popovers จะต้องเริ่มต้นกับ jQuery: เลือกองค์ประกอบที่ระบุและเรียก popover() วิธีการ
รหัสต่อไปนี้จะช่วยให้ทุก popovers ในเอกสาร:
ตัวอย่าง
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
ลองตัวเอง» Positioning Popovers
โดยค่าเริ่มต้น popover จะปรากฏบนด้านขวาขององค์ประกอบ
ใช้ data-placement แอตทริบิวต์ที่จะตั้งตำแหน่งของ popover ด้านบนด้านล่างด้านซ้ายหรือด้านขวาขององค์ประกอบ:
ตัวอย่าง
<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>
ลองตัวเอง» เคล็ดลับ: คุณยังสามารถใช้แอตทริบิวต์ข้อมูลตำแหน่งที่มีค่าของ "auto" ซึ่งจะช่วยให้เบราว์เซอร์ตัดสินใจตำแหน่งของ popover ตัวอย่างเช่นถ้าค่าเป็น "auto left" ที่ popover จะแสดงที่ด้านซ้ายเมื่อเป็นไปได้มิฉะนั้นทางด้านขวา
ปิด Popovers
โดยค่าเริ่มต้น popover ถูกปิดเมื่อคุณคลิกที่องค์ประกอบอีกครั้ง อย่างไรก็ตามคุณสามารถใช้ data-trigger="focus" แอตทริบิวต์ซึ่งจะปิด popover เมื่อคลิกนอกองค์ประกอบ:
ตัวอย่าง
<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>
ลองตัวเอง» เคล็ดลับ: หากคุณต้องการ popover ที่จะปรากฏขึ้นเมื่อคุณย้ายตัวชี้เมาส์ไปที่องค์ประกอบใช้ data-trigger แอตทริบิวต์ที่มีค่าของ "hover" :
ตัวอย่าง
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
ลองตัวเอง» กรอก Bootstrap Popover อ้างอิง
สำหรับการอ้างอิงที่สมบูรณ์ของทุก popover ตัวเลือกวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS Popover อ้างอิง