टूलटिप के बारे में बतावल गइल बा
एनीमेशन खातिर CSS3 आ लोकल टाइटल स्टोरेज खातिर डेटा-bs-एट्रिब्यूट सभ के इस्तेमाल से CSS आ जावास्क्रिप्ट के साथ कस्टम बूटस्ट्रैप टूलटिप जोड़े खातिर दस्तावेजीकरण आ उदाहरण।
अवलोकन कइल जाव
टूलटिप प्लगइन के इस्तेमाल करत घरी जानल जरूरी चीज:
- टूलटिप्स पोजीशनिंग खातिर 3rd पार्टी लाइब्रेरी पॉपर पर निर्भर बा । टूलटिप के काम करे खातिर रउआँ के bootstrap.js से पहिले popper.min.js के शामिल करे के पड़ी या
bootstrap.bundle.min.js
/ के इस्तेमाल करे के पड़ी जेह में Popper होखेbootstrap.bundle.js
! - टूलटिप्स प्रदर्शन के कारण ऑप्ट-इन होला, एह से रउआँ के खुद एकरा के इनिशियलाइज करे के पड़ी .
- शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।
- अधिक जटिल घटक सभ में रेंडरिंग के समस्या से बचे खातिर निर्दिष्ट करीं
container: 'body'
(जइसे कि हमनी के इनपुट समूह, बटन समूह इत्यादि)। - छिपल तत्वन पर टूलटिप के ट्रिगर कइला से काम ना होखी.
.disabled
या तत्व सभ खातिर टूलटिपdisabled
सभ के रैपर तत्व पर ट्रिगर कइल जरूरी बा।- जब कई लाइन सभ पर बिस्तार वाला हाइपरलिंक सभ से ट्रिगर कइल जाई तब टूलटिप सभ के केंद्र में रखल जाई। एह व्यवहार से बचे खातिर
white-space: nowrap;
अपना एस पर इस्तेमाल करीं .<a>
- टूलटिप सभ के डीओएम से संबंधित तत्व सभ के हटावे से पहिले छिपावे के पड़ी।
- टूलटिप सभ के शैडो डोम के अंदर के कौनों तत्व के बदौलत ट्रिगर कइल जा सके ला।
prefers-reduced-motion
मीडिया क्वेरी पर निर्भर होला। हमनी के सुलभता दस्तावेज के रिड्यूस्ड मोशन सेक्शन देखल जाव
.
उ सब मिल गईल बा? बढ़िया, देखल जाव कि कुछ उदाहरण का साथे ऊ लोग कइसे काम करेला.
उदाहरण: हर जगह टूलटिप सक्षम करीं
पन्ना पर मौजूद सगरी टूलटिप सभ के इनिशियलाइज करे के एगो तरीका ई होखी कि इनहन के data-bs-toggle
बिसेसता के आधार पर चुनल जाय:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
उदाहरण खातिर दिहल गइल बा
टूलटिप देखे खातिर नीचे दिहल लिंक सभ पर होवर करीं:
टूलटिप के साथ कुछ इनलाइन लिंक सभ के देखावे खातिर प्लेसहोल्डर टेक्स्ट । ई अब खाली फिलर बा, ना किलर। सामग्री के इहाँ खाली असली पाठ के उपस्थिति के नकल करे खातिर रखल गईल बा . आ ई सब बस रउरा के एगो अंदाजा लगावे खातिर कि वास्तविक दुनिया के स्थिति में इस्तेमाल कइला पर टूलटिप कइसे लउकी. त उमेद बा कि अब रउरा देखले होखब कि लिंक पर ई टूलटिप व्यवहार में कइसे काम कर सकेला, एक बेर रउरा एकर इस्तेमाल अपना साइट भा प्रोजेक्ट पर कर लिहला का बाद.
नीचे दिहल बटन सभ पर माउस करीं आ चार गो टूलटिप सभ के दिशा देखीं: ऊपर, दाहिना, नीचे, आ बाएँ। आरटीएल में बूटस्ट्रैप के इस्तेमाल करत घरी निर्देशन के मिरर कइल जाला।
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
आ कस्टम एचटीएमएल जोड़ल गइल बा:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
एगो एसवीजी के साथ:
ससस के बा
चर के बारे में बतावल गइल बा
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
प्रयोग के बारे में बतावल गइल बा
टूलटिप प्लगइन मांग पर सामग्री आ मार्कअप पैदा करे ला आ डिफ़ॉल्ट रूप से टूलटिप सभ के इनहन के ट्रिगर तत्व के बाद रखे ला।
जावास्क्रिप्ट के माध्यम से टूलटिप के ट्रिगर करीं:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ओवरफ्लो auto
हो गइल आscroll
टूलटिप स्थिति स्वचालित रूप से बदले के कोसिस करे ला जब कौनों मूल कंटेनर में हमनी के overflow: auto
होखे या overflow: scroll
पसंद होखे .table-responsive
, बाकी फिर भी मूल प्लेसमेंट के स्थिति रखे ला। एकरा के हल करे खातिर , डिफ़ॉल्ट मान के ओवरराइड करे खातिर boundary
विकल्प (विकल्प के इस्तेमाल करे वाला फ्लिप संशोधक खातिर ) के कौनों भी HTMLElement पर सेट करीं, , जइसे कि :popperConfig
'clippingParents'
document.body
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
मार्कअप कइल गइल बा
टूलटिप खातिर जरूरी मार्कअप खाली एगो data
एट्रिब्यूट होला आ title
एचटीएमएल तत्व पर रउआँ चाहत बानी कि टूलटिप होखे। टूलटिप के जनरेट कइल मार्कअप काफी सरल होला, हालाँकि एकरा खातिर एगो स्थिति के जरूरत जरूर होला (डिफ़ॉल्ट रूप से, top
प्लगइन द्वारा सेट कइल गइल)।
कीबोर्ड आ सहायक तकनीक के इस्तेमाल करे वाला लोग खातिर टूलटिप के काम करे वाला बनावल
रउआँ के खाली HTML तत्व सभ में टूलटिप जोड़ल जाय जे परंपरागत रूप से कीबोर्ड-फोकस करे लायक आ इंटरैक्टिव होखे (जइसे कि लिंक भा फॉर्म कंट्रोल)। हालाँकि, मनमाना HTML तत्व (जइसे कि <span>
s) सभ के tabindex="0"
बिसेसता जोड़ के फोकस करे लायक बनावल जा सके ला, एह से कीबोर्ड प्रयोगकर्ता लोग खातिर गैर-इंटरएक्टिव तत्व सभ पर संभावित रूप से परेशान करे वाला आ भ्रमित करे वाला टैब स्टॉप जोड़ल जाई आ ज्यादातर सहायक टेक्नोलॉजी सभ वर्तमान में एह स्थिति में टूलटिप के घोषणा ना करे लीं। एकरे अलावा, खाली अपना टूलटिप खातिर ट्रिगर के रूप में भरोसा मत करीं hover
, काहें से कि एह से कीबोर्ड यूजर लोग खातिर आपके टूलटिप सभ के ट्रिगर कइल असंभव हो जाई।
<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
अक्षम तत्वन के बा
एट्रिब्यूट वाला तत्व disabled
इंटरएक्टिव ना होलें, मने कि प्रयोगकर्ता लोग टूलटिप (या पॉपओवर) के ट्रिगर करे खातिर फोकस, होवर, या क्लिक ना क सके ला। एगो वर्कअराउंड के रूप में, रउआँ एगो रैपर से टूलटिप के ट्रिगर कइल चाहब <div>
या <span>
, आदर्श रूप से , के इस्तेमाल से कीबोर्ड-फोकस करे लायक बनावल गइल बा tabindex="0"
।
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
विकल्प बा
विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-bs-
, जइसे कि में data-bs-animation=""
। डेटा विशेषता के माध्यम से विकल्प पास करत समय विकल्प नाम के केस प्रकार camelCase से कबाब-केस में बदलल सुनिश्चित करीं। उदाहरण खातिर, के इस्तेमाल करे के बजाय data-bs-customClass="beautifier"
, के इस्तेमाल करीं data-bs-custom-class="beautifier"
।
sanitize
,
sanitizeFn
, आ
allowList
विकल्प सभ के डेटा बिसेसता सभ के इस्तेमाल से सप्लाई ना कइल जा सके ला।
नांव | किसिम | बाकी | बिबरन |
---|---|---|---|
animation |
बूलियन के बा | true |
टूलटिप पर एगो सीएसएस फेड संक्रमण लागू करीं |
container |
तार के बा | तत्व के बारे में बतावल गइल बा | गलत | false |
टूलटिप के कवनो खास तत्व में जोड़ देला। उदाहरण खातिर : |
delay |
नंबर के बा | वस्तु | 0 |
टूलटिप (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
html |
बूलियन के बा | false |
टूलटिप में एचटीएमएल के अनुमति दीं। अगर सही बा त टूलटिप में HTML टैग टूलटिप अगर रउआँ XSS हमला से चिंतित बानी त पाठ के इस्तेमाल करीं। |
placement |
तार के बा | परोजन | 'top' |
टूलटिप के पोजीशन कईसे कईल जाला - ऑटो | ऊपर के बा | नीचे के बा | छोड़ के बा | ठीक. जब कौनों फंक्शन के इस्तेमाल प्लेसमेंट के निर्धारण करे खातिर कइल जाला तब ओकरा के टूलटिप DOM नोड के पहिला आर्गुमेंट के रूप में आ ट्रिगरिंग एलिमेंट DOM नोड के दूसरा के रूप में बोलावल जाला। |
selector |
तार के बा | गलत | false |
अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। ब्यवहार में, एकर इस्तेमाल डायनामिक रूप से जोड़े वाला DOM तत्व ( jQuery.on सपोर्ट) सभ पर टूलटिप सभ के भी लागू करे खातिर कइल जाला। ई आ एगो जानकारी भरल उदाहरण देखल जाव . |
template |
डोरी | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
टूलटिप बनावत घरी इस्तेमाल करे खातिर बेस एचटीएमएल। टूलटिप के
सबसे बाहरी रैपर तत्व में |
title |
तार के बा | तत्व के बारे में बतावल गइल बा | परोजन | '' |
अगर कवनो फंक्शन दिहल गइल बा त ओकरा के ओकर |
trigger |
डोरी | 'hover focus' |
टूलटिप कइसे ट्रिगर होला - पर क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल. रउआँ कई गो ट्रिगर पास कर सकेनी; एकरा के एगो जगह से अलगा कर दीं.
|
fallbackPlacements |
सरणी के बा | ['top', 'right', 'bottom', 'left'] |
सरणी में प्लेसमेंट सभ के लिस्ट दे के (पसंदी के क्रम में) फॉलबैक प्लेसमेंट सभ के परिभाषित करीं। अधिक जानकारी खातिर पॉपर के व्यवहार डॉक्स देखल जाय |
boundary |
तार के बा | तत्त्व | 'clippingParents' |
टूलटिप के ओवरफ्लो बाधा सीमा (केवल पॉपर के preventOverflow संशोधक पर लागू होला)। डिफ़ॉल्ट रूप से ई 'clippingParents' HTMLElement संदर्भ (केवल जावास्क्रिप्ट के माध्यम से) बा आ स्वीकार क सकत बा। अधिक जानकारी खातिर पॉपर के detectOverflow डॉक्स देखल जाय । |
customClass |
तार के बा | परोजन | '' |
जब टूलटिप देखावल जाला त ओकरा में क्लास जोड़ीं. ध्यान दीं कि टेम्पलेट में निर्दिष्ट कौनों भी क्लास के अलावा ई क्लास सभ के जोड़ल जाई। कई गो क्लास जोड़े खातिर, ओह लोग के स्पेस से अलग करीं: रउआँ एगो अइसन फंक्शन भी पास कर सकत बानी जवन एकल स्ट्रिंग रिटर्न करे के चाहीं जेह में अतिरिक्त क्लास नाँव होखे। |
sanitize |
बूलियन के बा | true |
सेनेटाइजेशन के सक्षम भा अक्षम करीं. अगर सक्रिय हो जाई 'template' आ 'title' विकल्प सेनेटाइज कइल जाई. हमनी के जावास्क्रिप्ट दस्तावेज में सेनेटाइजर सेक्शन देखल जाव . |
allowList |
वस्तु | डिफ़ॉल्ट मान बा | ऑब्जेक्ट जवना में अनुमति दिहल गइल विशेषता आ टैग होखे |
sanitizeFn |
शून्य बा | परोजन | null |
इहाँ रउआ आपन सेनेटाइज फंक्शन के सप्लाई कर सकेनी। अगर रउआ सेनेटाइजेशन करे खातिर समर्पित पुस्तकालय के इस्तेमाल कइल पसंद करीं त ई उपयोगी हो सकेला। |
offset |
सरणी के बा | तार के बा | परोजन | [0, 0] |
टूलटिप के ओकर लक्ष्य के सापेक्ष ऑफसेट। रउआँ डेटा एट्रिब्यूट सभ में कौनों स्ट्रिंग के पास क सकत बानी जेह में अल्पविराम से अलग कइल मान बाड़ें जइसे कि: जब ऑफसेट के निर्धारण करे खातिर कौनों फंक्शन के इस्तेमाल कइल जाला तब एकरा के कौनों ऑब्जेक्ट के साथ कॉल कइल जाला जेह में पॉपर प्लेसमेंट, रेफरेंस आ पॉपर रेक्ट सभ के पहिला आर्गुमेंट के रूप में होला। ट्रिगरिंग तत्व DOM नोड के दूसरा आर्गुमेंट के रूप में पास कइल जाला। फंक्शन के दू गो नंबर वाला सरणी वापस करे के पड़ी: . अधिक जानकारी खातिर पॉपर के ऑफसेट डॉक्स देखल जाव । |
popperConfig |
शून्य बा | वस्तु के बारे में | परोजन | null |
बूटस्ट्रैप के डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन बदले खातिर, पॉपर के कॉन्फ़िगरेशन देखल जाय । जब कवनो फंक्शन के इस्तेमाल पॉपर कॉन्फ़िगरेशन बनावे खातिर कइल जाला तब ओकरा के एगो ऑब्जेक्ट के साथ कॉल कइल जाला जेह में बूटस्ट्रैप के डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन होला। ई रउआँ के डिफ़ॉल्ट के इस्तेमाल आ अपना कॉन्फ़िगरेशन के साथ मर्ज करे में मदद ��रे ला। फंक्शन के पॉपर खातिर एगो कॉन्फ़िगरेशन ऑब्जेक्ट वापस करे के पड़ी। |
अलग-अलग टूलटिप खातिर डेटा विशेषता
अलग-अलग टूलटिप सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला, जइसे कि ऊपर बतावल गइल बा।
के साथ फंक्शन के उपयोग कइल जा रहल बाpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
विधियन के बारे में बतावल गइल बा
एसिंक्रोनस तरीका आ संक्रमण के बारे में बतावल गइल बा
सभ एपीआई विधि एसिंक्रोनस होला आ एगो संक्रमण शुरू होला . संक्रमण शुरू होते ही उ लोग फोन करे वाला के पास वापस आ जाला लेकिन खतम होखे से पहिले . एकरा अलावा, एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कइल जाई .
अधिक जानकारी खातिर हमनी के जावास्क्रिप्ट दस्तावेज देखल जाव .
देखायीं
कवनो तत्व के टूलटिप के खुलासा करेला। टूलटिप के वास्तव में देखावे से पहिले (यानी shown.bs.tooltip
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला. शून्य लंबाई वाला टाइटिल वाला टूलटिप कबो ना देखावल जाला।
tooltip.show()
लुकाइल
कवनो तत्व के टूलटिप के छिपा देला। टूलटिप के वास्तव में छिपावे से पहिले (यानी hidden.bs.tooltip
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला.
tooltip.hide()
टॉगल कइल जाला
कवनो तत्व के टूलटिप के टॉगल करेला। टूलटिप के वास्तव में देखावल भा छिपावे से पहिले (यानी shown.bs.tooltip
या hidden.bs.tooltip
घटना होखे से पहिले) कॉलर के वापस आ जाला। एकरा के टूलटिप के “मैनुअल” ट्रिगरिंग मानल जाला.
tooltip.toggle()
निपटान करे के बा
कवनो तत्व के टूलटिप के छिपावेला आ नष्ट करेला (DOM तत्व पर संग्रहीत डेटा के हटावेला)। टूलटिप जे डेलिगेशन के इस्तेमाल करे लें (जे विकल्प के इस्तेमाल सेselector
बनावल जालें ) के वंशज ट्रिगर तत्व सभ पर अलग-अलग नष्ट ना कइल जा सके ला।
tooltip.dispose()
सक्षम करीं
कवनो तत्व के टूलटिप के देखावे के क्षमता देला। टूलटिप डिफ़ॉल्ट रूप से सक्षम बा।
tooltip.enable()
विकलांग
कवनो तत्व के टूलटिप के देखावे के क्षमता हटा देला। टूलटिप के तबे देखावल जा सकेला जब ओकरा के दोबारा सक्षम कइल जाव.
tooltip.disable()
toggleEnable कइल गइल बा
कवनो तत्व के टूलटिप के देखावे भा छिपावे के क्षमता के टॉगल करे ला।
tooltip.toggleEnabled()
अपडेट
कवनो तत्व के टूलटिप के स्थिति अपडेट करेला।
tooltip.update()
getInstance के बारे में बतावल गइल बा
स्थिर विधि जवन रउआ के कवनो डोम तत्व से जुड़ल टूलटिप इंस्टेंस पावे के अनुमति देला
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance के बारे में बतावल गइल बा
स्थिर तरीका जवन रउआँ के कवनो DOM तत्व से जुड़ल टूलटिप इंस्टेंस पावे के अनुमति देला, या फिर नया बनावे के अनुमति देला अगर ई इनिशियलाइज ना भइल होखे
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
घटनाक्रम के बारे में बतावल गइल बा
घटना के प्रकार बा | बिबरन |
---|---|
show.bs.tooltip |
show इंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
shown.bs.tooltip |
ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता के देखाई पड़े ला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
hide.bs.tooltip |
ई इवेंट तुरंत फायर हो जाला जब hide इंस्टेंस मेथड के कॉल हो जाला। |
hidden.bs.tooltip |
ई इवेंट तब फायर कइल जाला जब टूलटिप के प्रयोगकर्ता से छिपावल खतम हो जाला (CSS संक्रमण पूरा होखे के इंतजार करी)। |
inserted.bs.tooltip |
ई इवेंट ओह show.bs.tooltip इवेंट के बाद फायर कइल जाला जब टूलटिप टेम्पलेट के DOM में जोड़ दिहल जाला। |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()