ป๊อปโอเวอร์
เอกสารประกอบและตัวอย่างสำหรับการเพิ่ม 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
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 |
ต่อท้ายป๊อปโอเวอร์กับองค์ประกอบเฉพาะ ตัวอย่าง: |
content |
สตริง | องค์ประกอบ | การทำงาน | '' |
ค่าเนื้อหาเริ่มต้นหากไม่มี หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดย |
delay |
หมายเลข | วัตถุ | 0 |
ความล่าช้าในการแสดงและซ่อนป๊อปโอเวอร์ (ms) - ใช้ไม่ได้กับประเภททริกเกอร์ด้วยตนเอง หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง โครงสร้างวัตถุคือ: |
html |
บูลีน | false |
แทรก HTML ลงในป๊อปโอเวอร์ หากเป็นเท็จinnerText คุณสมบัติจะถูกใช้เพื่อแทรกเนื้อหาลงใน DOM ใช้ข้อความหากคุณกังวลเกี่ยวกับการโจมตี XSS |
placement |
สตริง | การทำงาน | 'right' |
วิธีวางตำแหน่งป๊อปโอเวอร์ - auto | ด้านบน | ด้านล่าง | ซ้าย | ขวา. เมื่อใช้ฟังก์ชันเพื่อกำหนดตำแหน่ง ฟังก์ชันจะถูกเรียกโดยมีโหนด DOM แบบป๊อปโอเวอร์เป็นอาร์กิวเมนต์แรก และโหนด DOM ที่ทริกเกอร์องค์ประกอบเป็นโหนดที่สอง บริบทถูกตั้ง ค่า |
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 พื้นฐานที่จะใช้เมื่อสร้างป๊อปโอเวอร์ ป๊อปโอเวอร์ ป๊อปโอเวอร์
องค์ประกอบ wrapper นอกสุดควรมี |
title |
สตริง | องค์ประกอบ | การทำงาน | '' |
ค่าเริ่มต้นของชื่อหากไม่มี หากมีการกำหนดฟังก์ชัน ฟังก์ชันนั้นจะถูกเรียกโดย |
trigger |
สตริง | 'click' |
วิธีเรียกป๊อปโอเวอร์ - คลิก | โฉบ | โฟกัส | คู่มือ. คุณอาจส่งทริกเกอร์หลายตัว แยกพวกเขาด้วยช่องว่าง manual ไม่สามารถรวมกับทริกเกอร์อื่นได้ |
fallbackPlacements |
อาร์เรย์ | ['top', 'right', 'bottom', 'left'] |
กำหนดตำแหน่งสำรองโดยระบุรายการตำแหน่งในอาร์เรย์ (ตามลำดับความชอบ) สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารพฤติกรรมของ Popper |
boundary |
สตริง | ธาตุ | 'clippingParents' |
ขอบเขตจำกัดโอเวอร์โฟลว์ของป๊อปโอเวอร์ (ใช้เฉพาะกับตัวแก้ไขป้องกันโอเวอร์โฟลว์ของ Popper) โดยค่าเริ่มต้น จะเป็น'clippingParents' และสามารถยอมรับการอ้างอิง HTMLElement (ผ่าน JavaScript เท่านั้น) สำหรับข้อมูลเพิ่มเติม โปรดดูที่เอกสาร detectOverflowของ Popper |
customClass |
สตริง | การทำงาน | '' |
เพิ่มคลาสไปที่ป๊อปโอเวอร์เมื่อแสดง โปรดทราบว่าคลาสเหล่านี้จะถูกเพิ่มนอกเหนือจากคลาสที่ระบุในเทมเพลต หากต้องการเพิ่มหลายคลาส ให้คั่นด้วยช่องว่าง: คุณยังสามารถส่งฟังก์ชันที่ควรส่งคืนสตริงเดียวที่มีชื่อคลาสเพิ่มเติม |
sanitize |
บูลีน | true |
เปิดหรือปิดการฆ่าเชื้อ หากเปิดใช้งาน'template' และ'content' ตัว'title' เลือกต่างๆ จะถูกฆ่าเชื้อ ดูส่วนการฆ่าเชื้อในเอกสาร JavaScript ของเรา |
allowList |
วัตถุ | ค่าเริ่มต้น | ออบเจ็กต์ที่มีแอตทริบิวต์และแท็กที่อนุญาต |
sanitizeFn |
null | การทำงาน | null |
ที่นี่คุณสามารถจัดหาฟังก์ชันฆ่าเชื้อของคุณเองได้ สิ่งนี้มีประโยชน์หากคุณต้องการใช้ห้องสมุดเฉพาะเพื่อทำการฆ่าเชื้อ |
offset |
อาร์เรย์ | สตริง | การทำงาน | [0, 8] |
ออฟเซ็ตของป๊อปโอเวอร์ที่สัมพันธ์กับเป้าหมาย คุณสามารถส่งสตริงในแอตทริบิวต์ข้อมูลด้วยค่าที่คั่นด้วยเครื่องหมายจุลภาค เช่น: เมื่อใช้ฟังก์ชันเพื่อกำหนดออฟเซ็ต ฟังก์ชันจะถูกเรียกด้วยออบเจ็กต์ที่มีการจัดวางแบบป๊อปเปอร์ การอ้างอิง และการแก้ไขแบบป๊อปอัปเป็นอาร์กิวเมนต์แรก องค์ประกอบทริกเกอร์โหนด DOM ถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สอง ฟังก์ชันต้องส่งคืนอาร์เรย์ที่มีตัวเลขสองตัว: |
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 ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
แสดง
แสดงป๊อปโอเวอร์ขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ป๊อปโอเวอร์จะปรากฏขึ้นจริง (เช่น ก่อน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...
})