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