in English

टूलटिप्स

स्थानीय शीर्षक भंडारण के लिए एनिमेशन और डेटा-विशेषताओं के लिए CSS3 का उपयोग करके CSS और जावास्क्रिप्ट के साथ कस्टम बूटस्ट्रैप टूलटिप्स जोड़ने के लिए दस्तावेज़ीकरण और उदाहरण।

अवलोकन

टूलटिप प्लगइन का उपयोग करते समय जानने योग्य बातें:

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

वह सब मिल गया? बढ़िया, आइए देखें कि वे कुछ उदाहरणों के साथ कैसे काम करते हैं।

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

किसी पृष्ठ पर सभी टूलटिप्स को प्रारंभ करने का एक तरीका यह होगा कि उन्हें उनकी data-toggleविशेषता के आधार पर चुना जाए:

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

उदाहरण

टूलटिप्स देखने के लिए नीचे दिए गए लिंक पर होवर करें:

टूलटिप्स के साथ कुछ इनलाइन लिंक प्रदर्शित करने के लिए प्लेसहोल्डर टेक्स्ट । यह अब सिर्फ भराव है, हत्यारा नहीं। सामग्री यहां केवल वास्तविक पाठ की उपस्थिति की नकल करने के लिए रखी गई है । और यह सब सिर्फ आपको यह अंदाजा लगाने के लिए है कि वास्तविक दुनिया की स्थितियों में उपयोग किए जाने पर टूलटिप्स कैसे दिखेंगे। तो उम्मीद है कि अब आप देख चुके हैं कि लिंक पर ये टूलटिप्स व्यवहार में कैसे काम कर सकते हैं, एक बार जब आप उन्हें अपनी साइट या प्रोजेक्ट पर उपयोग कर लेते हैं।

चार टूलटिप्स दिशा-निर्देश देखने के लिए नीचे दिए गए बटनों पर होवर करें: ऊपर, दाएँ, नीचे और बाएँ।

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

और कस्टम HTML के साथ जोड़ा गया:

<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विशेषता है और titleHTML तत्व पर आप टूलटिप रखना चाहते हैं। टूलटिप का उत्पन्न मार्कअप अपेक्षाकृत सरल है, हालांकि इसके लिए एक स्थिति की आवश्यकता होती है (डिफ़ॉल्ट रूप से, 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=""।

ध्यान दें कि सुरक्षा कारणों से डेटा विशेषताओं का उपयोग करके sanitize, sanitizeFnऔर विकल्पों की आपूर्ति नहीं की जा सकती है।whiteList
नाम टाइप चूक विवरण
एनीमेशन बूलियन सच टूलटिप पर CSS फ़ेड ट्रांज़िशन लागू करें
पात्र स्ट्रिंग | तत्व | असत्य असत्य

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

टूलटिप (एमएस) दिखाने और छिपाने में देरी - मैन्युअल ट्रिगर प्रकार पर लागू नहीं होती है

यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है

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

टूलटिप में HTML को अनुमति दें।

अगर सही है, तो टूलटिप में HTML टैग्स टूलटिप titleमें रेंडर किए जाएंगे। यदि गलत है, textतो DOM में सामग्री डालने के लिए jQuery की विधि का उपयोग किया जाएगा।

यदि आप XSS हमलों के बारे में चिंतित हैं तो टेक्स्ट का उपयोग करें।
प्लेसमेंट स्ट्रिंग | समारोह 'ऊपर'

टूलटिप की स्थिति कैसे बनाएं - ऑटो | शीर्ष | नीचे | बाएं | सही।
जब autoनिर्दिष्ट किया जाता है, तो यह टूलटिप को गतिशील रूप से पुनर्व्यवस्थित करेगा।

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

टूलटिप बनाते समय उपयोग करने के लिए HTML को आधार बनाएं।

टूलटिप titleमें इंजेक्ट किया जाएगा .tooltip-inner।

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

सबसे बाहरी आवरण तत्व में .tooltipवर्ग और role="tooltip".
शीर्षक स्ट्रिंग | तत्व | समारोह ''

डिफ़ॉल्ट शीर्षक मान यदि titleविशेषता मौजूद नहीं है।

यदि कोई फ़ंक्शन दिया जाता है, तो उसे उस तत्व के संदर्भ सेट के साथ बुलाया जाएगा, thisजिससे टूलटिप जुड़ा हुआ है।
चालू कर देना डोरी 'होवर फोकस'

टूलटिप कैसे ट्रिगर होता है - क्लिक करें | होवर | फोकस | नियमावली। आप कई ट्रिगर पास कर सकते हैं; उन्हें एक स्थान के साथ अलग करें।

'manual'.tooltip('show')इंगित करता है कि टूलटिप को , .tooltip('hide')और .tooltip('toggle')विधियों के माध्यम से प्रोग्रामेटिक रूप से ट्रिगर किया जाएगा ; इस मान को किसी अन्य ट्रिगर के साथ नहीं जोड़ा जा सकता है।

'hover'अपने आप टूलटिप्स का परिणाम होगा जिसे कीबोर्ड के माध्यम से ट्रिगर नहीं किया जा सकता है, और इसका उपयोग केवल तभी किया जाना चाहिए जब कीबोर्ड उपयोगकर्ताओं के लिए समान जानकारी देने के लिए वैकल्पिक तरीके मौजूद हों।
ओफ़्सेट संख्या | स्ट्रिंग | समारोह 0

अपने लक्ष्य के सापेक्ष टूलटिप का ऑफसेट।

जब किसी फ़ंक्शन का उपयोग ऑफ़सेट को निर्धारित करने के लिए किया जाता है, तो उसे ऑब्जेक्ट के साथ ऑफ़सेट डेटा को इसके पहले तर्क के रूप में कहा जाता है। फ़ंक्शन को किसी ऑब्जेक्ट को उसी संरचना के साथ वापस करना होगा। ट्रिगरिंग तत्व DOM नोड को दूसरे तर्क के रूप में पास किया जाता है।

अधिक जानकारी के लिए पॉपर ऑफ़सेट डॉक्स देखें ।
फ़ॉलबैक प्लेसमेंट स्ट्रिंग | सरणी 'पलटना' यह निर्दिष्ट करने की अनुमति दें कि पॉपर फ़ॉलबैक पर किस स्थिति का उपयोग करेगा। अधिक जानकारी के लिए पॉपर के व्यवहार दस्तावेज़ देखें
कस्टम क्लास स्ट्रिंग | समारोह ''

दिखाए जाने पर टूलटिप में कक्षाएं जोड़ें। ध्यान दें कि इन वर्गों को टेम्पलेट में निर्दिष्ट किसी भी वर्ग के अतिरिक्त जोड़ा जाएगा। अनेक वर्ग जोड़ने के लिए, उन्हें रिक्त स्थान से अलग करें: 'a b'.

आप एक फ़ंक्शन भी पास कर सकते हैं जो अतिरिक्त वर्ग नामों वाली एक स्ट्रिंग को वापस कर दे।
सीमा स्ट्रिंग | तत्व 'स्क्रॉल पेरेंट' टूलटिप की अतिप्रवाह बाधा सीमा। 'viewport', 'window', 'scrollParent', या HTMLElement संदर्भ (केवल जावास्क्रिप्ट) के मानों को स्वीकार करता है । अधिक जानकारी के लिए पॉपर के रोकथाम ओवरफ्लो दस्तावेज़ देखें ।
स्वच्छ बूलियन सच स्वच्छता को सक्षम या अक्षम करें। सक्रिय होने पर 'template'और 'title'विकल्पों को सैनिटाइज किया जाएगा। हमारे जावास्क्रिप्ट दस्तावेज़ में सैनिटाइज़र अनुभाग देखें ।
श्वेत सूची वस्तु डिफ़ॉल्ट मान ऑब्जेक्ट जिसमें अनुमत विशेषताएँ और टैग शामिल हैं
सेनिटाइज एफएन शून्य | समारोह शून्य यहां आप अपना खुद का सैनिटाइज फंक्शन सप्लाई कर सकते हैं। यह उपयोगी हो सकता है यदि आप स्वच्छता के लिए एक समर्पित पुस्तकालय का उपयोग करना पसंद करते हैं।
पॉपपर कॉन्फिग शून्य | वस्तु शून्य बूटस्ट्रैप के डिफ़ॉल्ट पॉपर कॉन्फिगरेशन को बदलने के लिए, पॉपर का कॉन्फिगरेशन देखें

व्यक्तिगत टूलटिप्स के लिए डेटा विशेषताएँ

अलग-अलग टूलटिप्स के विकल्प वैकल्पिक रूप से डेटा विशेषताओं के उपयोग के माध्यम से निर्दिष्ट किए जा सकते हैं, जैसा कि ऊपर बताया गया है।

तरीकों

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

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

$().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 इस घटना को तब सक्रिय किया जाता है जब टूलटिप को उपयोगकर्ता के लिए दृश्यमान बना दिया जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
Hide.bs.tooltip hideइंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है।
हिडन.बीएस.टूलटिप यह घटना तब सक्रिय हो जाती है जब टूलटिप उपयोगकर्ता से छिपा हुआ समाप्त हो जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।
इन्सर्टेड.बीएस.टूलटिप यह घटना उस show.bs.tooltipघटना के बाद सक्रिय हो जाती है जब टूलटिप टेम्पलेट को DOM में जोड़ा जाता है। 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})