टूलटिप के बारे में बतावल गइल बा

एनीमेशन खातिर CSS3 आ लोकल टाइटल स्टोरेज खातिर डेटा-bs-एट्रिब्यूट सभ के इस्तेमाल से CSS आ जावास्क्रिप्ट के साथ कस्टम बूटस्ट्रैप टूलटिप जोड़े खातिर दस्तावेजीकरण आ उदाहरण।

एह पन्ना पर दिहल गइल बा

अवलोकन कइल जाव

टूलटिप प्लगइन के इस्तेमाल करत घरी जानल जरूरी चीज:

टूलटिप्स पोजीशनिंग खातिर 3rd पार्टी लाइब्रेरी पॉपर पर निर्भर बा । टूलटिप के काम करे खातिर रउआँ के bootstrap.js से पहिले popper.min.js के शामिल करे के पड़ी या bootstrap.bundle.min.js/ के इस्तेमाल करे के पड़ी जेह में Popper होखे bootstrap.bundle.js!
टूलटिप्स प्रदर्शन के कारण ऑप्ट-इन होला, एह से रउआँ के खुद एकरा के इनिशियलाइज करे के पड़ी .
शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।
अधिक जटिल घटक सभ में रेंडरिंग के समस्या से बचे खातिर निर्दिष्ट करीं container: 'body'(जइसे कि हमनी के इनपुट समूह, बटन समूह इत्यादि)।
छिपल तत्वन पर टूलटिप के ट्रिगर कइला से काम ना होखी.
.disabledया तत्व सभ खातिर टूलटिप disabledसभ के रैपर तत्व पर ट्रिगर कइल जरूरी बा।
जब कई लाइन सभ पर बिस्तार वाला हाइपरलिंक सभ से ट्रिगर कइल जाई तब टूलटिप सभ के केंद्र में रखल जाई। एह व्यवहार से बचे खातिर white-space: nowrap;अपना एस पर इस्तेमाल करीं .<a>
टूलटिप सभ के डीओएम से संबंधित तत्व सभ के हटावे से पहिले छिपावे के पड़ी।
टूलटिप सभ के शैडो डोम के अंदर के कौनों तत्व के बदौलत ट्रिगर कइल जा सके ला।

डिफ़ॉल्ट रूप से, ई घटक बिल्ट-इन कंटेंट सेनेटाइजर के इस्तेमाल करे ला, जवन कौनों भी एचटीएमएल तत्व सभ के स्ट्रिप क देला जेकर स्पष्ट रूप से अनुमति नइखे। अधिक जानकारी खातिर हमनी के जावास्क्रिप्ट दस्तावेज में सेनेटाइजर सेक्शन देखीं ।

एह घटक के एनीमेशन प्रभाव 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)
})

उदाहरण खातिर दिहल गइल बा

टूलटिप देखे खातिर नीचे दिहल लिंक सभ पर होवर करीं:

नीचे दिहल बटन सभ पर माउस करीं आ चार गो टूलटिप सभ के दिशा देखीं: ऊपर, दाहिना, नीचे, आ बाएँ। आरटीएल में बूटस्ट्रैप के इस्तेमाल करत घरी निर्देशन के मिरर कइल जाला।

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

आ कस्टम एचटीएमएल जोड़ल गइल बा:

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

एगो एसवीजी के साथ:

ससस के बा

चर के बारे में बतावल गइल बा

$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;

प्रयोग के बारे में बतावल गइल बा

टूलटिप प्लगइन मांग पर सामग्री आ मार्कअप पैदा करे ला आ डिफ़ॉल्ट रूप से टूलटिप सभ के इनहन के ट्रिगर तत्व के बाद रखे ला।

जावास्क्रिप्ट के माध्यम से टूलटिप के ट्रिगर करीं:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

ओवरफ्लो `auto`हो गइल आ`scroll`

टूलटिप स्थिति स्वचालित रूप से बदले के कोसिस करे ला जब कौनों मूल कंटेनर में हमनी के overflow: autoहोखे या overflow: scrollपसंद होखे .table-responsive, बाकी फिर भी मूल प्लेसमेंट के स्थिति रखे ला। एकरा के हल करे खातिर , डिफ़ॉल्ट मान के ओवरराइड करे खातिर boundaryविकल्प (विकल्प के इस्तेमाल करे वाला फ्लिप संशोधक खातिर ) के कौनों भी HTMLElement पर सेट करीं, , जइसे कि :popperConfig'clippingParents'document.body

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

मार्कअप कइल गइल बा

टूलटिप खातिर जरूरी मार्कअप खाली एगो dataएट्रिब्यूट होला आ titleएचटीएमएल तत्व पर रउआँ चाहत बानी कि टूलटिप होखे। टूलटिप के जनरेट कइल मार्कअप काफी सरल होला, हालाँकि एकरा खातिर एगो स्थिति के जरूरत जरूर होला (डिफ़ॉल्ट रूप से, 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इंटरएक्टिव ना होलें, मने कि प्रयोगकर्ता लोग टूलटिप (या पॉपओवर) के ट्रिगर करे खातिर फोकस, होवर, या क्लिक ना क सके ला। एगो वर्कअराउंड के रूप में, रउआँ एगो रैपर से टूलटिप के ट्रिगर कइल चाहब <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>

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-bs-, जइसे कि में data-bs-animation=""। डेटा विशेषता के माध्यम से विकल्प पास करत समय विकल्प नाम के केस प्रकार camelCase से कबाब-केस में बदलल सुनिश्चित करीं। उदाहरण खातिर, के इस्तेमाल करे के बजाय data-bs-customClass="beautifier", के इस्तेमाल करीं data-bs-custom-class="beautifier"।

ध्यान दीं कि सुरक्षा कारण से sanitize, sanitizeFn, आ allowListविकल्प सभ के डेटा बिसेसता सभ के इस्तेमाल से सप्लाई ना कइल जा सके ला।

नांव	किसिम	बाकी	बिबरन
`animation`	बूलियन के बा	`true`	टूलटिप पर एगो सीएसएस फेड संक्रमण लागू करीं
`container`	तार के बा \| तत्व के बारे में बतावल गइल बा \| गलत	`false`	टूलटिप के कवनो खास तत्व में जोड़ देला। उदाहरण खातिर : `container: 'body'`. ई विकल्प खासतौर पर एह मायने में उपयोगी बा कि ई रउआँ के टूलटिप के ट्रिगरिंग तत्व के लगे दस्तावेज के प्रवाह में रखे के अनुमति देला - जवन विंडो के आकार बदले के दौरान टूलटिप के ट्रिगरिंग तत्व से दूर बहे से रोकी।
`delay`	नंबर के बा \| वस्तु	`0`	टूलटिप (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे वाला दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा:`delay: { "show": 500, "hide": 100 }`
`html`	बूलियन के बा	`false`	टूलटिप में एचटीएमएल के अनुमति दीं। अगर सही बा त टूलटिप में HTML टैग टूलटिप `title`में रेंडर हो जाई। अगर गलत `innerText`होखे त डीओएम में सामग्री डाले खातिर प्रॉपर्टी के इस्तेमाल कइल जाई. अगर रउआँ 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>'`	टूलटिप बनावत घरी इस्तेमाल करे खातिर बेस एचटीएमएल। टूलटिप के `title`इंजेक्ट कइल जाई `.tooltip-inner`. `.tooltip-arrow`टूलटिप के तीर बन जाई। सबसे बाहरी रैपर तत्व में `.tooltip`क्लास आ `role="tooltip"`.
`title`	तार के बा \| तत्व के बारे में बतावल गइल बा \| परोजन	`''`	`title`अगर विशेषता मौजूद ना होखे त डिफ़ॉल्ट टाइटल मान । अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर `this`संदर्भ ओह तत्व पर सेट क के बोलावल जाई जवना से टूलटिप जुड़ल बा.
`trigger`	डोरी	`'hover focus'`	टूलटिप कइसे ट्रिगर होला - पर क्लिक करीं \| होवर करे के बा \| फोकस करे के बा \| हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं. `'manual'`बतावे ला कि टूलटिप के प्रोग्रामेटिक रूप से `.show()`, `.hide()`आ `.toggle()`तरीका सभ के माध्यम से ट्रिगर कइल जाई; ई मान कौनों अउरी ट्रिगर के साथ ना जोड़ल जा सके ला। `'hover'`अपना आप में टूलटिप सभ के परिणाम होखी जे कीबोर्ड के माध्यम से ट्रिगर ना कइल जा सके लें, आ एकर इस्तेमाल तबे करे के चाहीं जब कीबोर्ड प्रयोगकर्ता लोग खातिर एकही जानकारी देवे के वैकल्पिक तरीका मौजूद होखे।
`fallbackPlacements`	सरणी के बा	`['top', 'right', 'bottom', 'left']`	सरणी में प्लेसमेंट सभ के लिस्ट दे के (पसंदी के क्रम में) फॉलबैक प्लेसमेंट सभ के परिभाषित करीं। अधिक जानकारी खातिर पॉपर के व्यवहार डॉक्स देखल जाय
`boundary`	तार के बा \| तत्त्व	`'clippingParents'`	टूलटिप के ओवरफ्लो बाधा सीमा (केवल पॉपर के preventOverflow संशोधक पर लागू होला)। डिफ़ॉल्ट रूप से ई `'clippingParents'`HTMLElement संदर्भ (केवल जावास्क्रिप्ट के माध्यम से) बा आ स्वीकार क सकत बा। अधिक जानकारी खातिर पॉपर के detectOverflow डॉक्स देखल जाय ।
`customClass`	तार के बा \| परोजन	`''`	जब टूलटिप देखावल जाला त ओकरा में क्लास जोड़ीं. ध्यान दीं कि टेम्पलेट में निर्दिष्ट कौनों भी क्लास के अलावा ई क्लास सभ के जोड़ल जाई। कई गो क्लास जोड़े खातिर, ओह लोग के स्पेस से अलग करीं: `'class-1 class-2'`. रउआँ एगो अइसन फंक्शन भी पास कर सकत बानी जवन एकल स्ट्रिंग रिटर्न करे के चाहीं जेह में अतिरिक्त क्लास नाँव होखे।
`sanitize`	बूलियन के बा	`true`	सेनेटाइजेशन के सक्षम भा अक्षम करीं. अगर सक्रिय हो जाई `'template'`आ `'title'`विकल्प सेनेटाइज कइल जाई. हमनी के जावास्क्रिप्ट दस्तावेज में सेनेटाइजर सेक्शन देखल जाव .
`allowList`	वस्तु	डिफ़ॉल्ट मान बा	ऑब्जेक्ट जवना में अनुमति दिहल गइल विशेषता आ टैग होखे
`sanitizeFn`	शून्य बा \| परोजन	`null`	इहाँ रउआ आपन सेनेटाइज फंक्शन के सप्लाई कर सकेनी। अगर रउआ सेनेटाइजेशन करे खातिर समर्पित पुस्तकालय के इस्तेमाल कइल पसंद करीं त ई उपयोगी हो सकेला।
`offset`	सरणी के बा \| तार के बा \| परोजन	`[0, 0]`	टूलटिप के ओकर लक्ष्य के सापेक्ष ऑफसेट। रउआँ डेटा एट्रिब्यूट सभ में कौनों स्ट्रिंग के पास क सकत बानी जेह में अल्पविराम से अलग कइल मान बाड़ें जइसे कि:`data-bs-offset="10,20"` जब ऑफसेट के निर्धारण करे खातिर कौनों फंक्शन के इस्तेमाल कइल जाला तब एकरा के कौनों ऑब्जेक्ट के साथ कॉल कइल जाला जेह में पॉपर प्लेसमेंट, रेफरेंस आ पॉपर रेक्ट सभ के पहिला आर्गुमेंट के रूप में होला। ट्रिगरिंग तत्व DOM नोड के दूसरा आर्गुमेंट के रूप में पास कइल जाला। फंक्शन के दू गो नंबर वाला सरणी वापस करे के पड़ी: .`[skidding, distance]` अधिक जानकारी खातिर पॉपर के ऑफसेट डॉक्स देखल जाव ।
`popperConfig`	शून्य बा \| वस्तु के बारे में \| परोज��	`null`	बूटस्ट्रैप के डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन बदले खातिर, पॉपर के कॉन्फ़िगरेशन देखल जाय । जब कवनो फंक्शन के इस्तेमाल पॉपर कॉन्फ़िगरेशन बनावे खातिर कइल जाला तब ओकरा के एगो ऑब्जेक्ट के साथ कॉल कइल जाला जेह में बूटस्ट्रैप के डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन होला। ई रउआँ के डिफ़ॉल्ट के इस्तेमाल आ अपना कॉन्फ़िगरेशन के साथ मर्ज करे में मदद करे ला। फंक्शन के पॉपर खातिर एगो कॉन्फ़िगरेशन ऑब्जेक्ट वापस करे के पड़ी।

अलग-अलग टूलटिप खातिर डेटा विशेषता

अलग-अलग टूलटिप सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला, जइसे कि ऊपर बतावल गइल बा।

के साथ फंक्शन के उपयोग कइल जा रहल बा`popperConfig`

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

विधियन के बारे में बतावल गइल बा

एसिंक्रोनस तरीका आ संक्रमण के बारे में बतावल गइल बा

सभ एपीआई विधि एसिंक्रोनस होला आ एगो संक्रमण शुरू होला . संक्रमण शुरू होते ही उ लोग फोन करे वाला के पास वापस आ जाला लेकिन खतम होखे से पहिले . एकरा अलावा, एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कइल जाई .

अधिक जानकारी खातिर हमनी के जावास्क्रिप्ट दस्तावेज देखल जाव .

देखायीं

कवनो तत्व के टूलटिप के खुलासा करेला। टूलटिप के वास्तव में देखावे से पहिले (यानी 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()

toggleEnable कइल गइल बा

कवनो तत्व के टूलटिप के देखावे भा छिपावे के क्षमता के टॉगल करे ला।

tooltip.toggleEnabled()

अपडेट

कवनो तत्व के टूलटिप के स्थिति अपडेट करेला।

tooltip.update()

getInstance के बारे में बतावल गइल बा

स्थिर विधि जवन रउआ के कवनो डोम तत्व से जुड़ल टूलटिप इंस्टेंस पावे के अनुमति देला

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