Source

टूलटिप्स

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

अवलोकन

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

  • टूलटिप्स स्थिति निर्धारण के लिए तृतीय पक्ष लाइब्रेरी Popper.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()
})

उदाहरण

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

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

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

<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 नोड को दूसरे तर्क के रूप में पास किया जाता है।

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

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

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

तरीकों

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

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

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

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