in English

ป๊อปโอเวอร์

เอกสารประกอบและตัวอย่างสำหรับการเพิ่ม Bootstrap popovers เช่นที่พบใน iOS ไปยังองค์ประกอบใดๆ บนไซต์ของคุณ

ภาพรวม

สิ่งที่ต้องรู้เมื่อใช้ปลั๊กอินป๊อปโอเวอร์:

  • Popovers อาศัยPopper ห้องสมุดบุคคลที่สาม สำหรับการวางตำแหน่ง คุณต้องรวมpopper.min.jsก่อน bootstrap.js หรือใช้bootstrap.bundle.min.js/ bootstrap.bundle.jsซึ่งมี Popper เพื่อให้ popover ทำงานได้!
  • Popovers ต้องการปลั๊กอินคำแนะนำเครื่องมือเป็นการพึ่งพา
  • หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องการutil.js .
  • Popovers เลือกใช้ด้วยเหตุผลด้านประสิทธิภาพ ดังนั้นคุณต้องเริ่มต้นมันเอง
  • ความยาวเป็นศูนย์titleและcontentค่าจะไม่แสดงป๊อปโอเวอร์
  • ระบุcontainer: 'body'เพื่อหลีกเลี่ยงปัญหาการแสดงผลในองค์ประกอบที่ซับซ้อนมากขึ้น (เช่น กลุ่มอินพุต กลุ่มปุ่ม ฯลฯ)
  • ทริกเกอร์ป๊อปอัปในองค์ประกอบที่ซ่อนอยู่จะไม่ทำงาน
  • ต้องทริกเกอร์ป๊อปโอเวอร์สำหรับ.disabledหรือ องค์ประกอบในองค์ประกอบแรปเปอร์disabled
  • เมื่อทริกเกอร์จากจุดยึดที่พันด้วยเส้นหลายเส้น ป๊อปโอเวอร์จะอยู่กึ่งกลางระหว่างความกว้างโดยรวมของจุดยึด ใช้.text-nowrapกับของคุณ<a>เพื่อหลีกเลี่ยงพฤติกรรมนี้
  • ต้องซ่อนป๊อปโอเวอร์ก่อนที่องค์ประกอบที่เกี่ยวข้องจะถูกลบออกจาก DOM
  • สามารถเรียกใช้ Popovers ได้ด้วยองค์ประกอบภายใน Shadow DOM
โดยค่าเริ่มต้น คอมโพเนนต์นี้ใช้ตัวฆ่าเชื้อเนื้อหาในตัว ซึ่งจะแยกองค์ประกอบ HTML ที่ไม่ได้รับอนุญาตอย่างชัดเจน ดู ส่วนการฆ่าเชื้อในเอกสาร JavaScript ของเราสำหรับรายละเอียดเพิ่มเติม
เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับ prefers-reduced-motionคิวรีสื่อ ดู ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา

อ่านต่อเพื่อดูว่าป๊อปอัปทำงานอย่างไรจากตัวอย่างบางส่วน

ตัวอย่าง: เปิดใช้งานป๊อปอัปทุกที่

วิธีหนึ่งในการเริ่มต้น popovers ทั้งหมดบนหน้าคือการเลือกตามdata-toggleแอตทริบิวต์:

$(function () {
  $('[data-toggle="popover"]').popover()
})

ตัวอย่าง: การใช้containerตัวเลือก

เมื่อคุณมีสไตล์บางอย่างในองค์ประกอบหลักที่รบกวนป๊อปโอเวอร์ คุณจะต้องระบุกำหนดเองcontainerเพื่อให้ HTML ของป๊อปโอเวอร์ปรากฏขึ้นภายในองค์ประกอบนั้นแทน

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

ตัวอย่าง

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

สี่ทิศ

มีสี่ตัวเลือก: จัดตำแหน่งบน ขวา ล่าง และซ้าย

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

ปิดในคลิกถัดไป

ใช้focusทริกเกอร์เพื่อปิดป๊อปอัปเมื่อผู้ใช้คลิกองค์ประกอบอื่นที่ไม่ใช่องค์ประกอบสลับในครั้งถัดไป

มาร์กอัปเฉพาะที่จำเป็นสำหรับการเลิกจ้างเมื่อคลิกถัดไป

สำหรับพฤติกรรมข้ามเบราว์เซอร์และข้ามแพลตฟอร์มที่เหมาะสม คุณต้องใช้<a>แท็กไม่ใช่แท็<button>ก และคุณต้องรวมtabindexแอตทริบิวต์ด้วย

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

องค์ประกอบพิการ

องค์ประกอบที่มีdisabledแอตทริบิวต์จะไม่โต้ตอบ หมายความว่าผู้ใช้ไม่สามารถวางเมาส์เหนือหรือคลิกเพื่อทริกเกอร์ป๊อปโอเวอร์ (หรือคำแนะนำเครื่องมือ) ในการแก้ปัญหาชั่วคราว คุณจะต้องทริกเกอร์ป๊อปโอเวอร์จากแรปเปอร์<div>หรือ<span>และแทนที่pointer-eventsองค์ประกอบที่ปิดใช้งาน

สำหรับทริกเกอร์ป๊อปโอเวอร์ที่ปิดใช้งาน คุณอาจต้องการdata-trigger="hover"ให้ป๊อปโอเวอร์ปรากฏเป็นการตอบกลับด้วยภาพทันทีสำหรับผู้ใช้ของคุณ เนื่องจากพวกเขาอาจไม่ได้คาดหวังว่าจะคลิกที่องค์ประกอบที่ถูกปิดใช้งาน

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

การใช้งาน

เปิดใช้งานป๊อปอัปผ่าน JavaScript:

$('#example').popover(options)
การเร่งความเร็ว GPU

บางครั้งป๊อปอัปอาจปรากฏไม่ชัดเจนบนอุปกรณ์ Windows 10 เนื่องจากการเร่งความเร็ว GPU และ DPI ของระบบที่แก้ไข วิธีแก้ปัญหาสำหรับสิ่งนี้ใน v4 คือการปิดใช้งานการเร่ง GPU ตามความจำเป็นในป๊อปอัปของคุณ

การแก้ไขที่แนะนำ:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

การทำให้ป๊อปอัปทำงานสำหรับผู้ใช้คีย์บอร์ดและเทคโนโลยีอำนวยความสะดวก

เพื่อให้ผู้ใช้แป้นพิมพ์เปิดใช้งานป๊อปอัปของคุณ คุณควรเพิ่มลงในองค์ประกอบ HTML ที่เน้นไปที่แป้นพิมพ์และโต้ตอบได้ตามปกติ (เช่น ลิงก์หรือตัวควบคุมฟอร์ม) แม้ว่าองค์ประกอบ HTML ตามอำเภอใจ (เช่น<span>s) สามารถทำให้โฟกัสได้โดยการเพิ่มtabindex="0"แอตทริบิวต์ สิ่งนี้จะเพิ่มการหยุดแท็บที่อาจน่ารำคาญและทำให้เกิดความสับสนในองค์ประกอบที่ไม่โต้ตอบสำหรับผู้ใช้แป้นพิมพ์ และเทคโนโลยีช่วยเหลือส่วนใหญ่ในปัจจุบันยังไม่ประกาศเนื้อหาของป๊อปโอเวอร์ในสถานการณ์นี้ . นอกจากนี้ อย่าพึ่งเพียงhoverเป็นทริกเกอร์สำหรับป๊อปโอเวอร์ของคุณ เนื่องจากจะทำให้ไม่สามารถทริกเกอร์สำหรับผู้ใช้คีย์บอร์ดได้

แม้ว่าคุณจะสามารถแทรก HTML ที่มีโครงสร้างและสมบูรณ์ในป๊อปโอเวอร์ด้วยhtmlตัวเลือกได้ เราขอแนะนำให้คุณหลีกเลี่ยงการเพิ่มเนื้อหาจำนวนมากเกินไป วิธีการทำงานของป๊อปอัปในปัจจุบันคือ เมื่อแสดงแล้ว เนื้อหาของป๊อปอัปจะเชื่อมโยงกับองค์ประกอบทริกเกอร์ด้วยaria-describedbyแอตทริบิวต์ ด้วยเหตุนี้ เนื้อหาทั้งหมดของป๊อปโอเวอร์จะถูกประกาศให้ผู้ใช้เทคโนโลยีอำนวยความสะดวกทราบเป็นสตรีมที่ยาวและไม่ขาดตอน

นอกจากนี้ คุณยังสามารถรวมการควบคุมแบบโต้ตอบได้ (เช่น องค์ประกอบของฟอร์มหรือลิงก์) ในป๊อปโอเวอร์ของคุณ (โดยการเพิ่มองค์ประกอบเหล่านี้ลงในwhiteListแอตทริบิวต์และแท็กที่อนุญาต) โปรดทราบว่าขณะนี้ป๊อปโอเวอร์ไม่ได้จัดการลำดับโฟกัสของแป้นพิมพ์ เมื่อผู้ใช้คีย์บอร์ดเปิดป๊อปโอเวอร์ โฟกัสยังคงอยู่ที่องค์ประกอบทริกเกอร์ และเนื่องจากป๊อปโอเวอร์มักจะไม่ติดตามทริกเกอร์ในโครงสร้างของเอกสารทันที จึงไม่รับประกันว่าการเดินหน้า/การกดTABจะย้ายผู้ใช้คีย์บอร์ดไปที่ป๊อปโอเวอร์เอง กล่าวโดยย่อ การเพิ่มการควบคุมแบบโต้ตอบไปยังป๊อปโอเวอร์จะทำให้การควบคุมเหล่านี้ไม่สามารถเข้าถึงได้/ใช้ไม่ได้สำหรับผู้ใช้แป้นพิมพ์และผู้ใช้เทคโนโลยีอำนวยความสะดวก หรืออย่างน้อยที่สุดก็ทำให้ลำดับโฟกัสโดยรวมที่ไร้เหตุผล ในกรณีเหล่านี้ ให้ลองใช้กล่องโต้ตอบโมดอลแทน

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-animation="".

โปรดทราบว่าด้วยเหตุผลด้านความปลอดภัย sanitize, sanitizeFnและ whiteListตัวเลือกไม่สามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล
ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
แอนิเมชั่น บูลีน จริง ใช้ CSS Fade Transition กับป๊อปโอเวอร์
คอนเทนเนอร์ สตริง | องค์ประกอบ | เท็จ เท็จ

ต่อท้ายป๊อปโอเวอร์กับองค์ประกอบเฉพาะ ตัวอย่าง: container: 'body'. ตัวเลือกนี้มีประโยชน์อย่างยิ่งโดยช่วยให้คุณสามารถวางตำแหน่งป๊อปโอเวอร์ในโฟลว์ของเอกสารใกล้กับองค์ประกอบที่ทริกเกอร์ ซึ่งจะป้องกันไม่ให้ป๊อปโอเวอร์ลอยออกจากองค์ประกอบที่ทริกเกอร์ในระหว่างการปรับขนาดหน้าต่าง

เนื้อหา สตริง | องค์ประกอบ | การทำงาน ''

ค่าเนื้อหาเริ่มต้นหากไม่มีdata-contentแอตทริบิวต์

หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดยthisตั้งค่าการอ้างอิงไปยังองค์ประกอบที่เชื่อมต่อป๊อปโอเวอร์

ล่าช้า หมายเลข | วัตถุ 0

ความล่าช้าในการแสดงและซ่อนป๊อปโอเวอร์ (ms) - ใช้ไม่ได้กับประเภททริกเกอร์ด้วยตนเอง

หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง

โครงสร้างวัตถุคือ:delay: { "show": 500, "hide": 100 }

html บูลีน เท็จ แทรก HTML ลงในป๊อปโอเวอร์ textหากเป็นเท็จ จะใช้วิธีของ jQuery เพื่อแทรกเนื้อหาลงใน DOM ใช้ข้อความหากคุณกังวลเกี่ยวกับการโจมตี XSS
ตำแหน่ง สตริง | การทำงาน 'ขวา'

วิธีวางตำแหน่งป๊อปโอเวอร์ - auto | ด้านบน | ด้านล่าง | ซ้าย | ขวา.
เมื่อautoถูกระบุ มันจะปรับทิศทางป๊อปโอเวอร์ใหม่แบบไดนามิก

เมื่อใช้ฟังก์ชันเพื่อกำหนดตำแหน่ง ฟังก์ชันจะถูกเรียกโดยมีโหนด DOM แบบป๊อปโอเวอร์เป็นอาร์กิวเมนต์แรก และโหนด DOM ที่ทริกเกอร์องค์ประกอบเป็นโหนดที่สอง บริบทถูกตั้ง ค่าthisเป็นอินสแตนซ์ป๊อปโอเวอร์

ตัวเลือก สตริง | เท็จ เท็จ หากมีตัวเลือก ออบเจ็กต์ป๊อปโอเวอร์จะถูกส่งไปยังเป้าหมายที่ระบุ ในทางปฏิบัติ ใช้เพื่อเปิดใช้งานเนื้อหา HTML แบบไดนามิกเพื่อเพิ่มป๊อปอัป ดูสิ่งนี้และตัวอย่างข้อมูล
แม่แบบ สตริง '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML พื้นฐานที่จะใช้เมื่อสร้างป๊อปโอเวอร์

ป๊อปโอเวอร์titleจะถูกฉีดเข้าไปในไฟล์.popover-header.

ป๊อปโอเวอร์contentจะถูกฉีดเข้าไปในไฟล์.popover-body.

.arrowจะกลายเป็นลูกศรของป๊อปโอเวอร์

องค์ประกอบ wrapper นอกสุดควรมี.popoverคลาส

ชื่อ สตริง | องค์ประกอบ | การทำงาน ''

ค่าเริ่มต้นของชื่อหากไม่มีtitleแอตทริบิวต์

หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดยthisตั้งค่าการอ้างอิงไปยังองค์ประกอบที่เชื่อมต่อป๊อปโอเวอร์

สิ่งกระตุ้น สตริง 'คลิก' วิธีเรียกป๊อปโอเวอร์ - คลิก | โฉบ | โฟกัส | คู่มือ. คุณอาจส่งทริกเกอร์หลายตัว แยกพวกเขาด้วยช่องว่าง manualไม่สามารถรวมกับทริกเกอร์อื่นได้
offset หมายเลข | สตริง 0 ออฟเซ็ตของป๊อปโอเวอร์ที่สัมพันธ์กับเป้าหมาย สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารออฟเซ็ตของPopper
fallbackPlacement สตริง | อาร์เรย์ 'พลิก' อนุญาตให้ระบุตำแหน่งที่ Popper จะใช้กับทางเลือก สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารพฤติกรรมของ Popper
customClass สตริง | การทำงาน ''

เพิ่มคลาสไปที่ป๊อปโอเวอร์เมื่อแสดง โปรดทราบว่าคลาสเหล่านี้จะถูกเพิ่มนอกเหนือจากคลาสที่ระบุในเทมเพลต หากต้องการเพิ่มหลายคลาส ให้คั่นด้วยช่องว่าง: 'a b'.

คุณยังสามารถส่งฟังก์ชันที่ควรส่งคืนสตริงเดียวที่มีชื่อคลาสเพิ่มเติม

เขตแดน สตริง | ธาตุ 'เลื่อนผู้ปกครอง' ขอบเขตจำกัดล้นของป๊อปโอเวอร์ ยอมรับค่าของ'viewport', 'window', 'scrollParent', หรือการอ้างอิง HTMLElement (JavaScript เท่านั้น) สำหรับข้อมูล เพิ่มเติม โปรดดู เอกสาร preventOverflowของ Popper
ฆ่าเชื้อ บูลีน จริง เปิดหรือปิดการฆ่าเชื้อ หากเปิดใช้งาน'template'และ'content'ตัว'title'เลือกต่างๆ จะถูกฆ่าเชื้อ ดูส่วนการฆ่าเชื้อในเอกสาร JavaScript ของเรา
whiteList วัตถุ ค่าเริ่มต้น ออบเจ็กต์ที่มีแอตทริบิวต์และแท็กที่อนุญาต
ฆ่าเชื้อFn null | การทำงาน โมฆะ ที่นี่คุณสามารถจัดหาฟังก์ชันฆ่าเชื้อของคุณเองได้ สิ่งนี้มีประโยชน์หากคุณต้องการใช้ห้องสมุดเฉพาะเพื่อทำการฆ่าเชื้อ
popperConfig null | วัตถุ โมฆะ หากต้องการเปลี่ยนการกำหนดค่า Popper เริ่มต้นของ Bootstrap โปรดดูการกำหนดค่าของ Popper

แอตทริบิวต์ข้อมูลสำหรับป๊อปอัปแต่ละรายการ

ตัวเลือกสำหรับป๊อปอัปแต่ละรายการสามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล ตามที่อธิบายข้างต้น

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

$().popover(options)

เริ่มต้น popovers สำหรับคอลเล็กชันองค์ประกอบ

.popover('show')

แสดงป๊อปโอเวอร์ขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ป๊อปโอเวอร์จะปรากฏขึ้นจริง (เช่น ก่อนshown.bs.popoverเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการกระตุ้น "ด้วยตนเอง" ของป๊อปโอเวอร์ ป๊อปอัปที่มีทั้งชื่อและเนื้อหามีความยาวเป็นศูนย์จะไม่ปรากฏ

$('#element').popover('show')

.popover('hide')

ซ่อนป๊อปโอเวอร์ขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ป๊อปโอเวอร์จะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.popoverเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการกระตุ้น "ด้วยตนเอง" ของป๊อปโอเวอร์

$('#element').popover('hide')

.popover('toggle')

สลับป๊อปโอเวอร์ขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ป๊อปโอเวอร์จะแสดงหรือซ่อนอยู่จริง (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.popoverหรือhidden.bs.popoverเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการกระตุ้น "ด้วยตนเอง" ของป๊อปโอเวอร์

$('#element').popover('toggle')

.popover('dispose')

ซ่อนและทำลายป๊อปโอเวอร์ขององค์ประกอบ ป๊อปโอเวอร์ที่ใช้การมอบหมาย (ซึ่งสร้างขึ้นโดยใช้ตัวselectorเลือก ) ไม่สามารถทำลายทีละรายการในองค์ประกอบทริกเกอร์ที่สืบทอดได้

$('#element').popover('dispose')

.popover('enable')

ให้ความสามารถในการแสดงป๊อปโอเวอร์ขององค์ประกอบ Popovers ถูกเปิดใช้งานโดยค่าเริ่มต้น

$('#element').popover('enable')

.popover('disable')

ลบความสามารถในการแสดงป๊อปโอเวอร์ขององค์ประกอบ ป๊อปโอเวอร์จะแสดงได้ก็ต่อเมื่อเปิดใช้งานอีกครั้ง

$('#element').popover('disable')

.popover('toggleEnabled')

สลับความสามารถในการแสดงหรือซ่อนป๊อปโอเวอร์ขององค์ประกอบ

$('#element').popover('toggleEnabled')

.popover('update')

อัปเดตตำแหน่งของป๊อปโอเวอร์ขององค์ประกอบ

$('#element').popover('update')

เหตุการณ์

ประเภทงาน คำอธิบาย
show.bs.popover เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshowการเรียกเมธอดของอินสแตนซ์
แสดง.bs.popover เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นป๊อปโอเวอร์ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
hide.bs.popover เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhideมีการเรียกเมธอดของอินสแตนซ์
hidden.bs.popover เหตุการณ์นี้เริ่มทำงานเมื่อป๊อปโอเวอร์ถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
แทรก.bs.popover เหตุการณ์นี้เริ่มทำงานหลังจากshow.bs.popoverเหตุการณ์เมื่อมีการเพิ่มเทมเพลตป๊อปโอเวอร์ใน DOM
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})