ป๊อปโอเวอร์

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

ภาพรวม

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

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

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

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

วิธีหนึ่งในการเริ่มต้น 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

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

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

<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)

ตัวเลือก

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

วิธีการ

$().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')

เหตุการณ์

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})