ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
in English

ป๊อปโอเวอร์

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

ภาพรวม

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

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

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

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

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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

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

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

ตัวอย่าง

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

สี่ทิศ

มีสี่ตัวเลือก: จัดตำแหน่งบน ขวา ล่าง และซ้าย ทิศทางจะถูกมิเรอร์เมื่อใช้ Bootstrap ใน RTL

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

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

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

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

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

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

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

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

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ซาส

ตัวแปร

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

การใช้งาน

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

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

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

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

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

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

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-bs-เช่นเดียวกับในdata-bs-animation="". อย่าลืมเปลี่ยนประเภทเคสของชื่อตัวเลือกจาก camelCase เป็น kebab-case เมื่อส่งตัวเลือกผ่านแอตทริบิวต์ข้อมูล ตัวอย่างเช่น แทนที่จะใช้data-bs-customClass="beautifier"ให้ใช้data-bs-custom-class="beautifier".

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

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

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

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

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

delay หมายเลข | วัตถุ 0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

trigger สตริง 'click' วิธีเรียกป๊อปโอเวอร์ - คลิก | โฉบ | โฟกัส | คู่มือ. คุณอาจส่งทริกเกอร์หลายตัว แยกพวกเขาด้วยช่องว่าง manualไม่สามารถรวมกับทริกเกอร์อื่นได้
fallbackPlacements อาร์เรย์ ['top', 'right', 'bottom', 'left'] กำหนดตำแหน่งสำรองโดยระบุรายการตำแหน่งในอาร์เรย์ (ตามลำดับความชอบ) สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารพฤติกรรมของ Popper
boundary สตริง | ธาตุ 'clippingParents' ขอบเขตจำกัดโอเวอร์โฟลว์ของป๊อปโอเวอร์ (ใช้เฉพาะกับตัวแก้ไขป้องกันโอเวอร์โฟลว์ของ Popper) โดยค่าเริ่มต้น จะเป็น'clippingParents'และสามารถยอมรับการอ้างอิง HTMLElement (ผ่าน JavaScript เท่านั้น) สำหรับข้อมูลเพิ่มเติม โปรดดูที่เอกสาร detectOverflowของ Popper
customClass สตริง | การทำงาน ''

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

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

sanitize บูลีน true เปิดหรือปิดการฆ่าเชื้อ หากเปิดใช้งาน'template'และ'content'ตัว'title'เลือกต่างๆ จะถูกฆ่าเชื้อ ดูส่วนการฆ่าเชื้อในเอกสาร JavaScript ของเรา
allowList วัตถุ ค่าเริ่มต้น ออบเจ็กต์ที่มีแอตทริบิวต์และแท็กที่อนุญาต
sanitizeFn null | การทำงาน null ที่นี่คุณสามารถจัดหาฟังก์ชันฆ่าเชื้อของคุณเองได้ สิ่งนี้มีประโยชน์หากคุณต้องการใช้ห้องสมุดเฉพาะเพื่อทำการฆ่าเชื้อ
offset อาร์เรย์ | สตริง | การทำงาน [0, 8]

ออฟเซ็ตของป๊อปโอเวอร์ที่สัมพันธ์กับเป้าหมาย คุณสามารถส่งสตริงในแอตทริบิวต์ข้อมูลด้วยค่าที่คั่นด้วยเครื่องหมายจุลภาค เช่น:data-bs-offset="10,20"

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

สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารออฟเซ็ตของPopper

popperConfig null | วัตถุ | การทำงาน null

หากต้องการเปลี่ยนการกำหนดค่า Popper เริ่มต้นของ Bootstrap โปรดดู การกำหนดค่า ของPopper

เมื่อใช้ฟังก์ชันเพื่อสร้างการกำหนดค่า Popper ฟังก์ชันนี้จะถูกเรียกใช้ด้วยอ็อบเจ็กต์ที่มีการกำหนดค่า Popper เริ่มต้นของ Bootstrap ช่วยให้คุณใช้และรวมค่าเริ่มต้นเข้ากับการกำหนดค่าของคุณเอง ฟังก์ชันต้องส่งคืนอ็อบเจ็กต์การกำหนดค่าสำหรับ Popper

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

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

การใช้ฟังก์ชันกับpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

วิธีการ

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

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

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

แสดง

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

myPopover.show()

ซ่อน

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

myPopover.hide()

สลับ

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

myPopover.toggle()

ทิ้ง

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

myPopover.dispose()

เปิดใช้งาน

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

myPopover.enable()

ปิดการใช้งาน

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

myPopover.disable()

สลับเปิดใช้งาน

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

myPopover.toggleEnabled()

อัปเดต

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

myPopover.update()

รับอินสแตนซ์

วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์แบบป๊อปโอเวอร์ที่เชื่อมโยงกับองค์ประกอบ DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์แบบป๊อปโอเวอร์ที่เชื่อมโยงกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

เหตุการณ์

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