Source

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

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

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

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

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

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

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

उदाहरण: हर जगह टूलटिप सक्षम करीं

पन्ना पर मौजूद सगरी टूलटिप सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-toggleबिसेसता के आधार पर चुनल जाय:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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

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

टाइट पैंट नेक्स्ट लेवल केफियेह आप शायद इनका बारे में नईखी सुनले। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। फार्म-टू-टेबल seitan, mcsweeney के फिक्सी टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चैम्ब्रे बा। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray। एगो वास्तव में विडंबनापूर्ण कारीगर जवन भी keytar , scenester खेत-से-मेज banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चा डेनिम एकल-मूल कॉफी वायरल।

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

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

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

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

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

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

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

$('#example').tooltip(options)
ओवरफ्लो autoहो गइल आscroll

टूलटिप स्थिति स्वचालित रूप से बदले के कोसिस करे ला जब कौनों मूल कंटेनर में हमनी के overflow: autoहोखे या overflow: scrollपसंद होखे .table-responsive, बाकी फिर भी मूल प्लेसमेंट के स्थिति रखे ला। हल करे खातिर, boundaryविकल्प के डिफ़ॉल्ट मान के अलावा कुछ अउरी पर सेट करीं, 'scrollParent', जइसे कि 'window':

$('#example').tooltip({ boundary: 'window' })

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

टूलटिप खातिर जरूरी मार्कअप खाली एगो dataएट्रिब्यूट होला आ titleएचटीएमएल तत्व पर रउआँ चाहत बानी कि टूलटिप होखे। टूलटिप के जनरेट कइल मार्कअप काफी सरल होला, हालाँकि एकरा खातिर एगो स्थिति के जरूरत जरूर होला (डिफ़ॉल्ट रूप से, topप्लगइन द्वारा सेट कइल गइल)।

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

रउआँ के खाली HTML तत्व सभ में टूलटिप जोड़ल जाय जे परंपरागत रूप से कीबोर्ड-फोकस करे लायक आ इंटरैक्टिव होखे (जइसे कि लिंक भा फॉर्म कंट्रोल)। हालाँकि, मनमाना HTML तत्व (जइसे कि <span>s) सभ के tabindex="0"बिसेसता जोड़ के फोकस करे लायक बनावल जा सके ला, एह से कीबोर्ड प्रयोगकर्ता लोग खातिर गैर-इंटरएक्टिव तत्व सभ पर संभावित रूप से परेशान करे वाला आ भ्रमित करे वाला टैब स्टॉप जोड़ल जाई। एकरा अलावे, अधिकांश सहायक तकनीक फिलहाल ए स्थिति में टूलटिप के घोषणा नईखे करत।

एकरे अलावा, खाली अपना टूलटिप खातिर ट्रिगर के रूप में भरोसा मत करीं hover, काहें से कि एह से कीबोर्ड यूजर लोग खातिर आपके टूलटिप सभ के ट्रिगर कइल असंभव हो जाई।

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

एट्रिब्यूट वाला तत्व disabledइंटरएक्टिव ना होलें, मने कि प्रयोगकर्ता लोग टूलटिप (या पॉपओवर) के ट्रिगर करे खातिर फोकस, होवर, या क्लिक ना क सके ला। एगो वर्कअराउंड के रूप में, रउआँ एगो रैपर से टूलटिप के ट्रिगर कइल चाहब <div>या <span>, आदर्श रूप से , के इस्तेमाल से कीबोर्ड-फोकस करे लायक बनावल गइल बा , आ अक्षम तत्व पर के tabindex="0"ओवरराइड कइल चाहब।pointer-events

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-animation=""।

नांव किसिम बाकी बिबरन
एनीमेशन के बारे में बतावल गइल बा बूलियन के बा सच टूलटिप पर एगो सीएसएस फेड संक्रमण लागू करीं
कंटेनर के बा तार के बा | तत्व के बारे में बतावल गइल बा | गलत गलत

टूलटिप के कवनो खास तत्व में जोड़ देला। उदाहरण खातिर : container: 'body'. ई विकल्प खासतौर पर एह मायने में उपयोगी बा कि ई रउआँ के टूलटिप के ट्रिगरिंग तत्व के लगे दस्तावेज के प्रवाह में रखे के इजाजत देला - जवन विंडो के आकार बदले के दौरान टूलटिप के ट्रिगरिंग तत्व से दूर तैरे से रोकी।
देरी नंबर के बा | वस्तु 0 के बा

टूलटिप (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला

अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला

वस्तु संरचना के बारे में बतावल गइल बा:delay: { "show": 500, "hide": 100 }
एचटीएमएल के बा बूलियन के बा गलत

टूलटिप में एचटीएमएल के अनुमति दीं।

अगर सही बा त टूलटिप में HTML टैग टूलटिप titleमें रेंडर हो जाई। अगर गलत बा, त jQuery के textतरीका के इस्तेमाल DOM में सामग्री डाले खातिर कइल जाई।

अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं.
प्लेसमेंट के बा तार के बा | परोजन 'ऊपर'

टूलटिप के पोजीशन कईसे कईल जाला - ऑटो | ऊपर के बा | नीचे के बा | छोड़ के बा | ठीक.
जब autoनिर्दिष्ट हो जाई त ई टूलटिप के डायनामिक रूप से रिओरिएंट करी।

जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के टूलटिप DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। thisसंदर्भ टूलटिप इंस्टेंस पर सेट कइल गइल बा ।
चयनकर्ता के बा तार के बा | गलत गलत अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। ब्यवहार में, एकर इस्तेमाल डायनामिक रूप से जोड़े वाला DOM तत्व ( jQuery.onसपोर्ट) सभ पर टूलटिप सभ के भी लागू करे खातिर कइल जाला। ई आ एगो जानकारी भरल उदाहरण देखल जाव .
टेम्पलेट के बारे में बतावल गइल बा डोरी '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप बनावत घरी इस्तेमाल करे खातिर बेस एचटीएमएल।

टूलटिप के titleइंजेक्ट कइल जाई .tooltip-inner.

.arrowटूलटिप के तीर बन जाई।

सबसे बाहरी रैपर तत्व में .tooltipक्लास आ role="tooltip".
हक तार के बा | तत्व के बारे में बतावल गइल बा | परोजन '' के बा।

titleअगर विशेषता मौजूद ना होखे त डिफ़ॉल्ट टाइटल मान ।

अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर thisसंदर्भ ओह तत्व पर सेट क के बोलावल जाई जवना से टूलटिप जुड़ल बा.
ट्रिगर डोरी 'होवर फोकस' के बा।

टूलटिप कइसे ट्रिगर होला - पर क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं.

'manual'बतावे ला कि टूलटिप के प्रोग्रामेटिक रूप से .tooltip('show'), .tooltip('hide')आ .tooltip('toggle')तरीका सभ के माध्यम से ट्रिगर कइल जाई; ई मान कौनों अउरी ट्रिगर के साथ ना जोड़ल जा सके ला।

'hover'अपना आप में टूलटिप सभ के परिणाम होखी जे कीबोर्ड के माध्यम से ट्रिगर ना कइल जा सके लें, आ एकर इस्तेमाल तबे करे के चाहीं जब कीबोर्ड प्रयोगकर्ता लोग खातिर एकही जानकारी देवे के वैकल्पिक तरीका मौजूद होखे।
ऑफसेट हो गइल बा नंबर के बा | डोरी 0 के बा टूलटिप के ओकर लक्ष्य के सापेक्ष ऑफसेट। अधिक जानकारी खातिर Popper.js के ऑफसेट डॉक्स देखल जाय ।
fallbackप्लेसमेंट के बा तार के बा | सरणी के बा 'पलटी' ई बतावे के अनुमति दीं कि पॉपर फॉलबैक पर कवना स्थिति के इस्तेमाल करी. अधिक जानकारी खातिर Popper.js के व्यवहार डॉक्स देखल जाय
सीमा के बा तार के बा | तत्त्व 'स्क्रॉलपैरेंट' के बा। टूलटिप के ओवरफ्लो बाधा सीमा। 'viewport', 'window', 'scrollParent', या कौनों HTMLElement संदर्भ (केवल जावास्क्रिप्ट) के मान स्वीकार करे ला । अधिक जानकारी खातिर Popper.js के preventOverflow डॉक्स देखल जाय ।

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

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

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

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

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

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

$().tooltip(options)

एगो तत्व संग्रह से एगो टूलटिप हैंडलर संलग्न करेला।

.tooltip('show')

कवनो तत्व के टूलटिप के खुलासा करेला। टूलटिप के वास्तव में देखावे से पहिले (यानी shown.bs.tooltipघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला. शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।

$('#element').tooltip('show')

.tooltip('hide')

कवनो तत्व के टूलटिप के छिपा देला। टूलटिप के वास्तव में छिपावे से पहिले (यानी hidden.bs.tooltipघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला.

$('#element').tooltip('hide')

.tooltip('toggle')

कवनो तत्व के टूलटिप के टॉगल करेला। टूलटिप के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.tooltipया hidden.bs.tooltipघटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला.

$('#element').tooltip('toggle')

.tooltip('dispose')

कवनो तत्व के टूलटिप के छिपा के नष्ट कर देला। टूलटिप जे डेलिगेशन के इस्तेमाल करे लें (जे विकल्प के इस्तेमाल सेselector बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।

$('#element').tooltip('dispose')

.tooltip('enable')

कवनो तत्व के टूलटिप के देखावे के क्षमता देला। टूलटिप डिफ़ॉल्ट रूप से सक्षम बा।

$('#element').tooltip('enable')

.tooltip('disable')

कवनो तत्व के टूलटिप के देखावे के क्षमता हटा देला। टूलटिप के तबे देखावल जा सकेला जब ओकरा के दोबारा सक्षम कइल जाव.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

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

घटना के प्रकार बा बिबरन
show.bs.tooltip के बारे में बतावल गइल बा showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल बा.bs.tooltip ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता के देखाई पड़े ला (CSS संक्रमण पूरा होखे के इंतजार करी)।
छिपावे के बा.बीएस.टूलटिप ई इवेंट तुरंत फायर हो जाला जब hideइंस्टेंस मेथड के कॉल हो जाला।
छिपल.बीएस.टूलटिप के बा ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)।
डालल गइल बा.बीएस.टूलटिप ई इवेंट ओह show.bs.tooltipइवेंट के बाद फायर कइल जाला जब टूलटिप टेम्पलेट के DOM में जोड़ दिहल जाला। 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})