გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

პოპოვერები

დოკუმენტაცია და მაგალითები Bootstrap popover-ების დასამატებლად, როგორიცაა iOS-ში ნაპოვნი ნებისმიერი ელემენტი თქვენს საიტზე.

მიმოხილვა

რა უნდა იცოდეთ popover მოდულის გამოყენებისას:

  • პოპოვერები პოზიციონირებისთვის ეყრდნობიან მესამე მხარის ბიბლიოთეკას Popper- ს. თქვენ უნდა შეიყვანოთ popper.min.js bootstrap.js-მდე ან გამოიყენოთ bootstrap.bundle.min.js/ bootstrap.bundle.jsრომელიც შეიცავს პოპერს, რათა პოპოვერებმა იმუშაონ!
  • პოპოვერები საჭიროებენ ინსტრუმენტთა მითითების დანამატს , როგორც დამოკიდებულებას.
  • Popover-ები დაშვებულია შესრულების მიზეზების გამო, ასე რომ თქვენ თავად უნდა მოაწყოთ ისინი .
  • ნულოვანი სიგრძე titleდა contentმნიშვნელობები არასოდეს აჩვენებს პოპოვერს.
  • მიუთითეთ container: 'body', რათა თავიდან აიცილოთ პრობლემები უფრო რთულ კომპონენტებში (როგორიცაა ჩვენი შეყვანის ჯგუფები, ღილაკების ჯგუფები და ა.შ.).
  • დამალულ ელემენტებზე პოპოვერების გააქტიურება არ იმუშავებს.
  • პოპოვერები .disabledან disabledელემენტები უნდა იყოს ჩართული შეფუთვის ელემენტზე.
  • როდესაც ამოქმედდება წამყვანებიდან, რომლებიც ხვდება რამდენიმე ხაზს, პოვერები ორიენტირებული იქნება წამყვანების საერთო სიგანეს შორის. გამოიყენეთ .text-nowrapთქვენი <a>s, რათა თავიდან აიცილოთ ეს ქცევა.
  • პოპოვერები უნდა იყოს დამალული, სანამ მათი შესაბამისი ელემენტები DOM-დან წაიშლება.
  • პოპოვერების გააქტიურება შესაძლებელია ჩრდილოვანი DOM-ის შიგნით არსებული ელემენტის წყალობით.
ნაგულისხმევად, ეს კომპონენტი იყენებს ჩაშენებულ კონტენტის გამაჯანსაღებელს, რომელიც აშორებს HTML ელემენტებს, რომლებიც აშკარად დაუშვებელია. იხილეთ სადეზინფექციო განყოფილება ჩვენს JavaScript დოკუმენტაციაში დამატებითი ინფორმაციისთვის.
ამ კომპონენტის ანიმაციური ეფექტი დამოკიდებულია prefers-reduced-motionმედიის მოთხოვნაზე. იხილეთ ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .

განაგრძეთ კითხვა, რომ ნახოთ როგორ მუშაობს პოპოვერები რამდენიმე მაგალითით.

მაგალითი: ჩართეთ პოპოვერები ყველგან

გვერდზე ყველა პოპოვერის ინიციალიზაციის ერთ-ერთი გზა იქნება მათი 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>

ოთხი მიმართულება

ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული. RTL-ში Bootstrap-ის გამოყენებისას მიმართულებები ასახულია.

<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ტრიგერი, რათა გააუქმოთ popovers მომხმარებლის შემდეგი დაწკაპუნებით სხვა ელემენტზე, ვიდრე გადართვის ელემენტი.

საჭიროა კონკრეტული მარკირება შემდეგი დაწკაპუნებით გაუქმებისთვის

ბრაუზერის და კროს პლატფორმის სწორი ქცევისთვის, თქვენ უნდა გამოიყენოთ <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არ არის ინტერაქტიული, რაც იმას ნიშნავს, რომ მომხმარებლებს არ შეუძლიათ მაუსის გადატანა ან დააწკაპუნონ მათზე პოპოვერის (ან ხელსაწყოს მინიშნების) გასააქტიურებლად. გამოსავლის გამოსავალად, თქვენ მოგინდებათ ჩართოთ პოპოვერი შეფუთვით <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-bs-, როგორც data-bs-animation="". დარწმუნდით, რომ შეცვალეთ ოფციის სახელის ქეისის ტიპი camelCase-დან kebab-case-ზე, როდესაც ოფციონებს მონაცემთა ატრიბუტებით გადასცემთ. მაგალითად, გამოყენების ნაცვლად data-bs-customClass="beautifier"გამოიყენეთ data-bs-custom-class="beautifier".

გაითვალისწინეთ, რომ უსაფრთხოების მიზეზების გამო sanitize, sanitizeFn, და allowListპარამეტრების მიწოდება შეუძლებელია მონაცემთა ატრიბუტების გამოყენებით.
სახელი ტიპი ნაგულისხმევი აღწერა
animation ლოგიკური true გამოიყენეთ CSS fade გადასვლა პოპოვერზე
container სიმებიანი | ელემენტი | ყალბი false

ანიჭებს პოპოვერს კონკრეტულ ელემენტს. მაგალითი container: 'body':. ეს პარამეტრი განსაკუთრებით სასარგებლოა იმით, რომ საშუალებას გაძლევთ მოათავსოთ პოპოვერი დოკუმენტის ნაკადში გამომწვევ ელემენტთან ახლოს - რაც ხელს შეუშლის პოპოვერს ტრიგერის ელემენტისგან მოშორებას ფანჯრის ზომის შეცვლის დროს.

content სიმებიანი | ელემენტი | ფუნქცია ''

კონტენტის ნაგულისხმევი მნიშვნელობა, თუ data-bs-contentატრიბუტი არ არის.

თუ ფუნქცია მოცემულია, ის გამოიძახება მისი thisმითითების ნაკრებით იმ ელემენტთან, რომელზეც არის მიმაგრებული popover.

delay ნომერი | ობიექტი 0

პოპოვერის (ms) ჩვენება და დამალვის დაგვიანება - არ ვრცელდება ხელით ტრიგერის ტიპზე

თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე

ობიექტის სტრუქტურა არის:delay: { "show": 500, "hide": 100 }

html ლოგიკური false ჩადეთ HTML პოპოვერში. თუ false, innerTextთვისება გამოყენებული იქნება კონტენტის DOM-ში ჩასართავად. გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები.
placement სიმებიანი | ფუნქცია 'right'

როგორ განვათავსოთ პოპოვერი - ავტო | ზედა | ქვედა | მარცხენა | უფლება.
როდესაც autoმითითებულია, ის დინამიურად გადააბრუნებს პოპოვერს.

როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება popover DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძი, როგორც მისი მეორე. thisკონტექსტი დაყენებულია პოპოვერის მაგალითზე .

selector სიმებიანი | ყალბი false თუ სელექტორი არის მოწოდებული, popover ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება დინამიური HTML შინაარსის დასამატებლად popovers. იხილეთ ეს და ინფორმაციული მაგალითი .
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პოპოვერის ისარი გახდება.

ყველაზე გარე შეფუთვის ელემენტს უნდა ჰქონდეს .popoverკლასი.

title სიმებიანი | ელემენტი | ფუნქცია ''

სათაურის ნაგულისხმევი მნიშვნელობა, თუ titleატრიბუტი არ არის.

თუ ფუნქცია მოცემულია, ის გამოიძახება მისი thisმითითების ნაკრებით იმ ელემენტთან, რომელზეც არის მიმაგრებული popover.

trigger სიმებიანი 'click' როგორ ხდება პოპოვერის გააქტიურება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში. manualარ შეიძლება გაერთიანდეს სხვა ტრიგერთან.
fallbackPlacements მასივი ['top', 'right', 'bottom', 'left'] განსაზღვრეთ სარეზერვო განლაგება მასივში განლაგების სიის მიწოდებით (უპირატესობის მიხედვით). დამატებითი ინფორმაციისთვის იხილეთ პოპერის ქცევის დოკუმენტები
boundary სიმებიანი | ელემენტი 'clippingParents' პოპოვერის გადინების შეზღუდვის საზღვარი (გამოიყენება მხოლოდ Popper-ის preventOverflow მოდიფიკატორზე). ნაგულისხმევად ის არის 'clippingParents'და შეუძლია მიიღოს HTMLElement მითითება (მხოლოდ JavaScript-ის საშუალებით). დამატებითი ინფორმაციისთვის იხილეთ Popper's detectOverflow docs .
customClass სიმებიანი | ფუნქცია ''

დაამატეთ კლასები popover-ში, როდესაც ის გამოჩნდება. გაითვალისწინეთ, რომ ეს კლასები დაემატება შაბლონში მითითებულ კლასებს. რამდენიმე კლასის დასამატებლად გამოყავით ისინი ინტერვალით: '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]

დამატებითი ინფორმაციისთვის იხილეთ პოპერის ოფსეტური დოკუმენტები .

popperConfig null | ობიექტი | ფუნქცია null

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

ჩართვა

აძლევს ელემენტის პოპოვერს ჩვენების უნარს. ნაგულისხმევად ჩართულია პოპოვერები.

myPopover.enable()

გამორთვა

შლის ელემენტის პოპოვერის ჩვენების შესაძლებლობას. პოპოვერის ჩვენება მხოლოდ ხელახლა ჩართვის შემთხვევაში იქნება შესაძლებელი.

myPopover.disable()

გადართვა ჩართულია

ცვლის ელემენტის popover-ის ჩვენების ან დამალვის შესაძლებლობას.

myPopover.toggleEnabled()

განახლება

განაახლებს ელემენტის პოპოვერის პოზიციას.

myPopover.update()

getInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ პოპოვერის ინსტანცია ასოცირებული 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გამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია.ბს.პოპოვერი ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას).
დამალვა.ბს.პოპოვერი ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hideგამოიძახება ინსტანციის მეთოდი.
დამალული.ბს.პოპოვერი ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი დაასრულებს მომხმარებლისგან დამალვას (დაელოდება CSS გადასვლების დასრულებას).
ჩასმული.ბს.პოპოვერი ეს ღონისძიება show.bs.popoverგააქტიურებულია ღონისძიების შემდეგ, როდესაც popover-ის შაბლონი დაემატება DOM-ს.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})