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

ინსტრუმენტების რჩევები

დოკუმენტაცია და მაგალითები პერსონალური Bootstrap ინსტრუმენტების დასამატებლად CSS-ით და JavaScript-ით CSS3-ის გამოყენებით ანიმაციებისთვის და მონაცემთა-bs-ატრიბუტები ლოკალური სათაურის შესანახად.

მიმოხილვა

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

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

მიიღე ეს ყველაფერი? კარგია, ვნახოთ, როგორ მუშაობენ ისინი რამდენიმე მაგალითით.

მაგალითი: ჩართეთ ინსტრუმენტების რჩევები ყველგან

გვერდზე ყველა ინსტრუმენტების ინიციალიზაციის ერთ-ერთი გზა იქნება მათი data-bs-toggleატრიბუტის მიხედვით შერჩევა:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

მაგალითები

ინსტრუმენტების რჩევების სანახავად გადაიტანეთ მაუსი ქვემოთ მოცემულ ბმულებზე:

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

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

და მორგებული HTML-ით დამატებული:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

SVG-ით:

სას

ცვლადები

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

გამოყენება

Tooltip დანამატი წარმოქმნის შინაარსს და მარკირებას მოთხოვნისამებრ, და ნაგულისხმევად ათავსებს ინსტრუმენტების რჩევებს მათი ტრიგერის ელემენტის შემდეგ.

ჩართეთ ინსტრუმენტული მინიშნება JavaScript-ის საშუალებით:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
გადადინება autoდაscroll

Tooltip პოზიცია ცდილობს ავტომატურად შეიცვალოს, როდესაც მშობელი კონტეინერი აქვს overflow: autoან overflow: scrollმოსწონს ჩვენი .table-responsive, მაგრამ მაინც ინარჩუნებს თავდაპირველ განლაგებას. ამის გადასაჭრელად, დააყენეთ boundaryოფცია (შებრუნების მოდიფიკატორისთვის, რომელიც იყენებს popperConfigოფციას) ნებისმიერ HTMLElement-ზე, რათა გადალახოს ნაგულისხმევი მნიშვნელობა, 'clippingParents'როგორიცაა document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

მარკირება

ინსტრუმენტის მითითებისთვის საჭირო მარკირება მხოლოდ dataატრიბუტია და titleHTML ელემენტზე გსურთ გქონდეთ ინსტრუმენტული მინიშნება. ინსტრუმენტთა რჩევის გენერირებული მარკირება საკმაოდ მარტივია, თუმცა ის მოითხოვს პოზიციას (ნაგულისხმევად, დაყენებულია topდანამატის მიერ).

კლავიატურის და დამხმარე ტექნოლოგიების მომხმარებელთათვის ინსტრუმენტების რჩევების გაკეთება

თქვენ უნდა დაამატოთ მხოლოდ ინსტრუმენტების რჩევები HTML ელემენტებს, რომლებიც ტრადიციულად კლავიატურაზე ფოკუსირებული და ინტერაქტიულია (როგორიცაა ბმულები ან ფორმის კონტროლი). მიუხედავად იმისა, რომ თვითნებური HTML ელემენტები (როგორიცაა <span>s) შეიძლება ფოკუსირებადი გახდეს tabindex="0"ატრიბუტის დამატებით, ეს დაამატებს პოტენციურად შემაწუხებელ და დამაბნეველ ჩანართებს არაინტერაქტიულ ელემენტებზე კლავიატურის მომხმარებლებისთვის, და დამხმარე ტექნოლოგიების უმეტესობა ამჟამად არ აცხადებს ინსტრუმენტთა რჩევას ამ სიტუაციაში. გარდა ამისა, არ დაეყრდნოთ მხოლოდ hoverთქვენი ინსტრუმენტების მინიშნებას, რადგან ეს შეუძლებელს გახდის თქვენი ინსტრუმენტების ჩართვას კლავიატურის მომხმარებლებისთვის.

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

გამორთული ელემენტები

ატრიბუტის მქონე ელემენტები disabledარ არის ინტერაქტიული, რაც იმას ნიშნავს, რომ მომხმარებლებს არ შეუძლიათ ფოკუსირება, მაუსის გადატანა ან დაწკაპუნება მათზე, რათა გამოიწვიონ ინსტრუმენტების მინიშნება (ან popover). გამოსავლის გამოსავალად, თქვენ მოგინდებათ ჩართოთ ხელსაწყოს მინიშნება შეფუთვიდან <div>ან <span>იდეალურად შექმნილი კლავიატურაზე ფოკუსირებადი გამოყენებით tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Პარამეტრები

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

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

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

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

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

html ლოგიკური false

HTML-ის დაშვება ხელსაწყოს მინიშნებში.

თუ სიმართლეა, HTML ტეგები ინსტრუმენტების მინიშნებში titleიქნება გამოსახული ინსტრუმენტის მინიშნებაში. თუ false, innerTextთვისება გამოყენებული იქნება კონტენტის DOM-ში ჩასართავად.

გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები.

placement სიმებიანი | ფუნქცია 'top'

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

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

selector სიმებიანი | ყალბი false თუ სელექტორი არის მოწოდებული, ხელსაწყოს მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება აგრეთვე ინსტრუმენტთა რჩევების გამოსაყენებლად დინამიურად დამატებულ DOM ელემენტებზე ( jQuery.onმხარდაჭერა). იხილეთ ეს და ინფორმაციული მაგალითი .
template სიმებიანი '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML-ის საბაზისო გამოყენება ინსტრუმენტთა რჩევის შექმნისას.

ხელსაწყოთი titleშეყვანილი იქნება .tooltip-inner.

.tooltip-arrowგახდება ინსტრუმენტის ისარი.

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

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

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

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

trigger სიმებიანი 'hover focus'

როგორ ხდება ინსტრუმენტული მინიშნება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში.

'manual'მიუთითებს, რომ ინსტრუმენტული მინიშნება პროგრამულად გააქტიურდება .show(), .hide()და .toggle()მეთოდების მეშვეობით; ეს მნიშვნელობა არ შეიძლება გაერთიანდეს სხვა ტრიგერთან.

'hover'დამოუკიდებლად გამოიწვევს ინსტრუმენტების რჩევებს, რომელთა გაშვება შეუძლებელია კლავიატურის საშუალებით და უნდა იქნას გამოყენებული მხოლოდ იმ შემთხვევაში, თუ არსებობს კლავიატურის მომხმარებლებისთვის იგივე ინფორმაციის გადაცემის ალტერნატიული მეთოდები.

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

დაამატეთ კლასები ხელსაწყოს მინიშნებაში, როდესაც ის გამოჩნდება. გაითვალისწინეთ, რომ ეს კლასები დაემატება შაბლონში მითითებულ კლასებს. რამდენიმე კლასის დასამატებლად გამოყავით ისინი ინტერვალით: 'class-1 class-2'.

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

sanitize ლოგიკური true ჩართეთ ან გამორთეთ სანიტარიზაცია. თუ გააქტიურებულია 'template'და 'title'ოფციები იქნება გაწმენდილი. იხილეთ სადეზინფექციო განყოფილება ჩვენს JavaScript დოკუმენტაციაში .
allowList ობიექტი ნაგულისხმევი მნიშვნელობა ობიექტი, რომელიც შეიცავს დაშვებულ ატრიბუტებსა და ტეგებს
sanitizeFn null | ფუნქცია null აქ შეგიძლიათ მიაწოდოთ თქვენი საკუთარი სადეზინფექციო ფუნქცია. ეს შეიძლება იყოს სასარგებლო, თუ გირჩევნიათ გამოიყენოთ გამოყოფილი ბიბლიოთეკა სანიტარიულობის შესასრულებლად.
offset მასივი | სიმებიანი | ფუნქცია [0, 0]

ინსტრუმენტული ინსტრუმენტების ოფსეტური მიზანთან შედარებით. თქვენ შეგიძლიათ გადასცეთ სტრიქონი მონაცემთა ატრიბუტებში მძიმით გამოყოფილი მნიშვნელობებით, როგორიცაა:data-bs-offset="10,20"

როდესაც ფუნქცია გამოიყენება ოფსეტის დასადგენად, ის გამოიძახება ობიექტით, რომელიც შეიცავს პოპერის განლაგებას, მითითებას და პოპერის რექტს, როგორც მის პირველ არგუმენტს. გამომწვევი ელემენტი DOM კვანძი გადაეცემა მეორე არგუმენტად. ფუნქციამ უნდა დააბრუნოს მასივი ორი რიცხვით: .[skidding, distance]

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

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

Bootstrap-ის ნაგულისხმევი Popper კონფიგურაციის შესაცვლელად იხილეთ Popper-ის კონფიგურაცია .

როდესაც ფუნქცია გამოიყენება Popper-ის კონფიგურაციის შესაქმნელად, მას უწოდებენ ობიექტს, რომელიც შეიცავს Bootstrap-ის ნაგულისხმევ პოპერის კონფიგურაციას. ის გეხმარებათ გამოიყენოთ და შეაერთოთ ნაგულისხმევი კონფიგურაცია. ფუნქციამ უნდა დააბრუნოს Popper-ის კონფიგურაციის ობიექტი.

მონაცემთა ატრიბუტები ინდივიდუალური ინსტრუმენტებისთვის

ცალკეული ინსტრუმენტების რჩევების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით, როგორც ეს ზემოთ იყო ახსნილი.

ფუნქციის გამოყენებაpopperConfig

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

მეთოდები

ასინქრონული მეთოდები და გადასვლები

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

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

შოუ

ავლენს ელემენტის ინსტრუმენტს. უბრუნდება აბონენტს ინსტრუმენტების მითითების რეალურად ჩვენებამდე (ანუ shown.bs.tooltipმოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად. ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.

tooltip.show()

დამალვა

მალავს ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტების მინიშნება რეალურად იქნება დამალული (ანუ hidden.bs.tooltipმოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.

tooltip.hide()

გადართვა

ცვლის ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტის მინიშნება რეალურად გამოჩნდება ან დამალული იქნებაshown.bs.tooltip ( ანუ, სანამ მოხდება hidden.bs.tooltipმოვლენა). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.

tooltip.toggle()

განკარგავს

მალავს და ანადგურებს ელემენტის ინსტრუმენტს (შლის DOM ელემენტზე შენახულ მონაცემებს). ინსტრუმენტების რჩევები, რომლებიც იყენებენ დელეგირებასselector (რომლებიც შექმნილია ოფციის გამოყენებით ) არ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.

tooltip.dispose()

ჩართვა

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

tooltip.enable()

გამორთვა

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

tooltip.disable()

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

ცვლის ელემენტის ხელსაწყოს მინიშნების ჩვენების ან დამალვის შესაძლებლობას.

tooltip.toggleEnabled()

განახლება

აახლებს ელემენტის ხელსაწყოს მინიშნების პოზიციას.

tooltip.update()

getInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან ასოცირებული ინსტრუმენტული მინიშნება

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

getOrCreateInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან ასოცირებული ინსტრუმენტული მინიშნება, ან შექმნათ ახალი, თუ ის არ იყო ინიციალიზებული

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

Ივენთი

ღონისძიების ტიპი აღწერა
show.bs.tooltip ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
shown.bs.tooltip ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას).
hide.bs.tooltip ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hideგამოიძახება ინსტანციის მეთოდი.
hidden.bs.tooltip ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება დასრულდა მომხმარებლისგან დამალული (დაელოდება CSS გადასვლების დასრულებას).
inserted.bs.tooltip ეს ღონისძიება გააქტიურებულია show.bs.tooltipღონისძიების შემდეგ, როდესაც ინსტრუმენტის მინიშნება შაბლონი დაემატება DOM-ს.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()