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

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

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

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

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

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

उ सब मिल गईल बा? बढ़िया, देखल जाव कि कुछ उदाहरण का साथे ऊ लोग कइसे काम करेला.

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

एह घटक के एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर होला। हमनी के सुलभता दस्तावेज के रिड्यूस्ड मोशन सेक्शन देखल जाव .

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

टूलटिप के सक्षम करीं

जइसन कि ऊपर बतावल गइल बा, टूलटिप सभ के इस्तेमाल करे से पहिले इनहन के इनिशियलाइज करे के पड़ी। पन्ना पर सभ टूलटिप सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-bs-toggleबिसेसता के आधार पर चुनल जाय, जइसे कि:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

लिंक पर टूलटिप दिहल गइल बा

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

एचटीएमएल के बा

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

बेझिझक कवनो एक के इस्तेमाल करीं titleभा data-bs-titleअपना एचटीएमएल में. जब titleइस्तेमाल होखी तब पॉपर एकरा के स्वचालित रूप से बदल दी data-bs-titleजब तत्व रेंडर कइल जाई।

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

v5.2.0 में जोड़ल गइल बा

रउआ CSS चर के उपयोग करके टूलटिप के रूप के अनुकूलित कर सकत बानी . हमनी के अपना कस्टम रूप के दायरा बनावे खातिर के साथ एगो कस्टम क्लास सेट करेनी जा data-bs-custom-class="custom-tooltip"आ एकर इस्तेमाल एगो लोकल सीएसएस चर के ओवरराइड करे खातिर करेनी जा।

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

एचटीएमएल के बा

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

दिशा-निर्देश दिहल गइल बा

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

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

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

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

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

सीएसएस के बा

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

v5.2.0 में जोड़ल गइल बा

बूटस्ट्रैप के बिकसित होखे वाला सीएसएस चर दृष्टिकोण के हिस्सा के रूप में, टूलटिप अब .tooltipबढ़ल रियल-टाइम कस्टमाइजेशन खातिर लोकल सीएसएस चर के ऑन के इस्तेमाल करे ला। CSS चर सभ खातिर मान Sass के माध्यम से सेट कइल जाला, एह से Sass अनुकूलन अभी भी समर्थित बा, भी।

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

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

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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

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

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

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

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

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

विकल्प बा

चूंकि विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला, रउआँ , में विकल्प नाँव जोड़ सकत बानी data-bs-, जइसे कि में data-bs-animation="{value}"। डेटा एट्रिब्यूट के माध्यम से विकल्प पास करत घरी विकल्प नाम के केस टाइप के “ camelCase ” से “ कबाब-केस ” में बदलल सुनिश्चित करीं । जइसे कि के data-bs-custom-class="beautifier"जगह पर इस्तेमाल करीं data-bs-customClass="beautifier".

बूटस्ट्रैप 5.2.0 के रूप में, सभ घटक सभ एगो प्रयोगात्मक आरक्षित डेटा बिसेसता के सपोर्ट करे लें data-bs-configजे सरल घटक कॉन्फिगरेशन के JSON स्ट्रिंग के रूप में रख सके लें। जब कौनों तत्व के लगे data-bs-config='{"delay":0, "title":123}'आ data-bs-title="456"बिसेसता होखे तब अंतिम titleमान होखी 456आ अलग-अलग डेटा बिसेसता सभ पर दिहल मान सभ के ओवरराइड क दीहें data-bs-config। एकरे अलावा, मौजूदा डेटा विशेषता सभ JSON मान सभ के रखे में सक्षम बाड़ें जइसे कि data-bs-delay='{"show":0,"hide":150}'.

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

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

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

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

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

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

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

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

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

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

विधि	बिबरन
`disable`	कवनो तत्व के टूलटिप के देखावे के क्षमता हटा देला। टूलटिप तबे देखावल जा सकेला जब ओकरा के दोबारा सक्षम कइल जाव.
`dispose`	कवनो तत्व के टूलटिप के छिपावेला आ नष्ट करेला (DOM तत्व पर संग्रहीत डेटा के हटावेला)। टूलटिप जे डेलिगेशन के इस्तेमाल करे लें (जे विकल्प के इस्तेमाल से`selector` बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।
`enable`	कवनो तत्व के टूलटिप के देखावे के क्षमता देला। टूलटिप डिफ़ॉल्ट रूप से सक्षम बा।
`getInstance`	स्थिर तरीका जवन रउआँ के कवनो DOM तत्व से जुड़ल टूलटिप इंस्टेंस पावे के अनुमति देला, या फिर नया बना के एह स्थिति में कि ई इनिशियलाइज ना भइल होखे।
`getOrCreateInstance`	स्थिर तरीका जवन रउआँ के कवनो DOM तत्व से जुड़ल टूलटिप इंस्टेंस पावे के अनुमति देला, या फिर नया बना के एह स्थिति में कि ई इनिशियलाइज ना भइल होखे।
`hide`	कवनो तत्व के टूलटिप के छिपा देला। टूलटिप के वास्तव में छिपावे से पहिले (यानी `hidden.bs.tooltip`घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला.
`setContent`	टूलटिप के सामग्री के इनिशियलाइजेशन के बाद बदले के तरीका देला।
`show`	कवनो तत्व के टूलटिप के खुलासा करेला। टूलटिप के वास्तव में देखावे से पहिले (यानी `shown.bs.tooltip`घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला. शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।
`toggle`	कवनो तत्व के टूलटिप के टॉगल करेला। टूलटिप के वास्तव में देखावल भा छिपावे से पहिले (यानी `shown.bs.tooltip`या `hidden.bs.tooltip`घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला.
`toggleEnabled`	कवनो तत्व के टूलटिप के देखावे भा छिपावे के क्षमता के टॉगल करे ला।
`update`	कवनो तत्व के टूलटिप के स्थिति अपडेट करेला।

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

तरीका एगो तर्क के setContentस्वीकार करे objectला, जहाँ हर गुण-कुंजी stringपॉपओवर टेम्पलेट के भीतर एगो मान्य चयनकर्ता होला, आ हर संबंधित गुण-मूल्य string| element| function| null

घटनाक्रम के बारे में बतावल गइल बा

कार्यक्रम	बिबरन
`hide.bs.tooltip`	ई इवेंट तुरंत फायर हो जाला जब `hide`इंस्टेंस मेथड के कॉल हो जाला।
`hidden.bs.tooltip`	ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
`inserted.bs.tooltip`	ई इवेंट ओह `show.bs.tooltip`इवेंट के बाद फायर कइल जाला जब टूलटिप टेम्पलेट के DOM में जोड़ दिहल जाला।
`show.bs.tooltip`	`show`इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
`shown.bs.tooltip`	ई इवेंट तब फायर कइल जाला जब पॉपओवर के प्रयोगकर्ता के देखाई देवे वाला बनावल जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()

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

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

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

टूलटिप के सक्षम करीं

लिंक पर टूलटिप दिहल गइल बा

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

दिशा-निर्देश दिहल गइल बा

सीएसएस के बा

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

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

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

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

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

कीबोर्ड आ सहायक तकनीक के इस्तेमाल करे वाला लोग खातिर टूलटिप के काम करे वाला बनावल

अक्षम तत्वन के बा

विकल्प बा

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

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

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

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

घटनाक्रम के बारे में बतावल गइल बा

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

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