टूलटिप्स
स्थानीय शीर्षक भंडारण कें लेल एनीमेशन आ डाटा-विशेषताक कें लेल CSS3 कें उपयोग करयत CSS आ जावास्क्रिप्ट कें साथ कस्टम बूटस्ट्रैप टूलटिप्स जोड़य कें लेल दस्तावेजीकरण आ उदाहरण.
अवलोकन
टूलटिप प्लगइन क उपयोग करबा काल जानबाक चाही:
- टूलटिप्स पोजीशनिंग कें लेल 3rd पार्टी लाइब्रेरी पॉपर पर निर्भर छै. टूलटिप्स के काज करय लेल अहाँ के bootstrap.js स पहिने popper.min.js शामिल करय पड़त या
bootstrap.bundle.min.js
/ के प्रयोग करय पड़तbootstrap.bundle.js
जाहि में Popper अछि ! - यदि अहाँ हमर जावास्क्रिप्ट स्रोत सँ बना रहल छी, त' एकरा आवश्यकता
util.js
अछि . - टूलटिप्स प्रदर्शन कारण सं ऑप्ट-इन अछि, तें अहां कें एकरा स्वयं आरंभ करय पड़त .
- शून्य-लंबाई शीर्षक वाला टूलटिप कहियो प्रदर्शित नहि कएल जाएत अछि.
container: 'body'
अधिक जटिल घटक (जैना कि हमरऽ इनपुट समूह, बटन समूह, आदि) म॑ रेंडरिंग समस्या स॑ बचै लेली निर्दिष्ट करलऽ जाय ।- नुकायल तत्व पर टूलटिप ट्रिगर करब काज नहि करत.
.disabled
या तत्वक कें लेल टूलटिप्स केंdisabled
एकटा रैपर तत्व पर ट्रिगर करनाय आवश्यक छै.- जखन हाइपरलिंक सं ट्रिगर कैल जैतय जे अनेक लाइनक पर फैलल होयत छै, तखन टूलटिप्स केंद्रित होयत.
white-space: nowrap;
एहि व्यवहार सँ बचबाक लेल अपन<a>
s पर प्रयोग करू । - टूलटिप्स कें ओकर संगत तत्वक कें डीओएम सं हटावय सं पहिले नुकायल करनाय आवश्यक छै.
- टूलटिप्स क॑ छाया डोम के अंदर के तत्व के बदौलत ट्रिगर करलऽ जाब॑ सकै छै ।
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>
आ कस्टम एचटीएमएल जोडल गेलाक संग:
<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
HTML तत्व पर अहाँ चाहैत छी जे टूलटिप हो | टूलटिप केरऽ जेनरेट करलऽ गेलऽ मार्कअप काफी सरल छै, हालांकि एकरा लेली एगो स्थिति केरऽ आवश्यकता जरूर छै (डिफ़ॉल्ट रूप स॑, top
प्लगइन द्वारा सेट करलऽ गेलऽ छै) ।
कीबोर्ड आ सहायक प्रौद्योगिकी उपयोगकर्ताक कें लेल टूलटिप्स कें काज करनाय
अहां कें केवल एचटीएमएल तत्वक मे टूलटिप्स जोड़बाक चाही जे परंपरागत रूप सं कीबोर्ड-केंद्रित आ इंटरैक्टिव (जैना लिंक या फॉर्म नियंत्रण) होयत छै. यद्यपि मनमानी एचटीएमएल तत्व (जैना <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 फेड संक्रमण लागू करू |
पात्र | तार | तत्व | झूठ | झूठ | टूलटिप क' कोनो विशिष्ट तत्व मे जोड़ैत अछि. जेना : |
देरी | नम्बर | वस्तु | ० | टूलटिप (ms) कें देखएय आ नुकाएय मे देरी - मैनुअल ट्रिगर प्रकार पर लागू नहि होयत छै यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै वस्तु संरचना अछि : १. |
एचटीएमएल | बूलियन | झूठ | टूलटिप मे एचटीएमएल क अनुमति दिअ। यदि सही छै, त टूलटिप म॑ HTML टैग टूलटिप म॑ यदि अहाँ XSS हमला के बारे में चिंतित छी त पाठ के प्रयोग करू. |
प्लेसमेंट के लिये | तार | आयोजन | 'शिखर' | टूलटिप को कैसे पोजीशन दें - ऑटो | ऊपर | नीचे | बाएँ | ठीक. जब॑ कोनों फंक्शन क॑ प्लेसमेंट निर्धारित करै लेली प्रयोग करलऽ जाय छै त॑ ओकरा टूलटिप DOM नोड क॑ ओकरऽ पहिलऽ आर्गुमेंट के रूप म॑ आरू ट्रिगरिंग एलिमेंट DOM नोड क॑ ओकरऽ दोसरऽ के रूप म॑ कॉल करलऽ जाय छै । |
चयनकर्ता | तार | झूठ | झूठ | यदि कोनों चयनकर्ता उपलब्ध करायल गेल छै, त टूलटिप वस्तुअक कें निर्दिष्ट लक्ष्यक कें लेल प्रत्यायोजित कैल जेतय. jQuery.on व्यवहार मे, एकर उपयोग गतिशील रूप सं जोडल गेल डीओएम तत्वक ( समर्थन) पर टूलटिप्स लागू करय कें लेल सेहो कैल जायत छै . ई आ एकटा जानकारीपूर्ण उदाहरण देखू . |
टेम्पलेट | डोरी | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
टूलटिप बनाबय के समय उपयोग करय लेल एचटीएमएल के आधार बनाउ. टूलटिप के
सबसँ बाहरी रैपर तत्व मे |
शीर्षक | तार | तत्व | आयोजन | '' . |
यदि कोनो फंक्शन देल गेल अछि त ओकरा अपन |
उत्प्रेरक | डोरी | 'होवर फोकस'। | टूलटिप कोना ट्रिगर होइत अछि - क्लिक करू | मंडराइत | फोकस | हाथ सं कएल गेल. अहाँ अनेक ट्रिगर पास क सकैत छी; एकरा सभकेँ एकटा रिक्त स्थानसँ अलग करू।
|
ऑफसेट | नम्बर | तार | आयोजन | ० | टूलटिप के अपन लक्ष्य के सापेक्ष ऑफसेट। जब॑ कोनों फंक्शन क॑ ऑफसेट निर्धारित करै लेली प्रयोग करलऽ जाय छै त॑ ओकरा एक ऑब्जेक्ट के साथ कॉल करलऽ जाय छै जेकरा म॑ ऑफसेट डाटा क॑ ओकरऽ पहिलऽ आर्गुमेंट के रूप म॑ शामिल करलऽ जाय छै । फंक्शन क' एकहि संरचना वाला ऑब्जेक्ट रिटर्न करबाक चाही. ट्रिगरिंग तत्व DOM नोड कें दोसर तर्क कें रूप मे पास करल गेलय छै. अधिक जानकारी के लेल पॉपर के ऑफसेट डॉक्स देखू . |
fallbackप्लेसमेंट के बारे में | तार | सरणी | 'पलटी मरनाइ' | ई निर्दिष्ट करबाक अनुमति दिअ जे पॉपर फॉलबैक पर कोन स्थितिक उपयोग करत. अधिक जानकारी के लेल पॉपर के व्यवहार डॉक्स देखू |
कस्टमक्लास | तार | आयोजन | '' . | टूलटिप देखाओल गेला पर क्लास जोड़ू. ध्यान रहे कि ई वर्ग टेम्पलेट म॑ निर्दिष्ट कोनो भी वर्ग के अलावा जोड़लऽ जैतै । एक सँ बेसी वर्ग जोड़बाक लेल, ओकरा रिक्त स्थान सँ अलग करू: अहां एकटा एहन फंक्शन सेहो पास क सकय छी जे एकटा स्ट्रिंग रिटर्न करबाक चाही जाहि मे अतिरिक्त क्लास नाम होएत. |
सीमा | तार | तत्त्व | 'स्क्रॉलपैरेंट'। | टूलटिप के ओवरफ्लो बाधा सीमा। 'viewport' , 'window' , 'scrollParent' , अथवा एकटा HTMLElement संदर्भ (केवल जावास्क्रिप्ट) क' मान स्वीकार करैत अछि . अधिक जानकारी क लेल Popper क preventOverflow docs देखू . |
सेनेटाइज करब | बूलियन | सत्य | सेनेटाइजेशन सक्षम या अक्षम करू। अगर सक्रिय भ 'template' गेल आ 'title' विकल्प के सेनेटाइज कएल जाएत। हमर जावास्क्रिप्ट दस्तावेजीकरण मे सेनेटाइजर खंड देखू . |
श्वेतसूची | वस्तु | पूर्वनिर्धारित मान | ऑब्जेक्ट जइ मे अनुमत विशेषता आ टैग होयत छै |
सेनेटाइज करबFn | शून्य | आयोजन | सुन्ना | एतय अहां अपन सेनेटाइज फंक्शन के सप्लाई क सकय छी. यदि अहां सेनेटाइजेशन करएय कें लेल समर्पित पुस्तकालय कें उपयोग करनाय पसंद करएयत छी त इ उपयोगी भ सकएय छै. |
पॉपरकॉन्फिग | शून्य | वस्तु | सुन्ना | बूटस्ट्रैप क' डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन बदलबाक लेल, पॉपर क कॉन्फ़िगरेशन देखू |
व्यक्तिगत टूलटिप्स के लिये डेटा विशेषताएँ
व्यक्तिगत टूलटिप्स कें लेल विकल्प वैकल्पिक रूप सं डेटा विशेषताक कें उपयोग कें माध्यम सं निर्दिष्ट कैल जा सकय छै, जैना की ऊपर व्याख्या कैल गेल छै.
विधियाँ
अतुल्यकालिक विधि एवं संक्रमण
सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .
$().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 इंस्टेंस मेथड कॉल कएल गेल अछि. |
छिपल.बीएस.टूलटिप | ई घटना तखन फायर कएल जाइत अछि जखन टूलटिप उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
सम्मिलित.बी.एस.टूलटिप | ई घटना घटना के बाद फायर करलऽ जाय छै show.bs.tooltip जब॑ टूलटिप टेम्पलेट क॑ DOM म॑ जोड़लऽ गेलऽ छै । |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})