Source

टूलटिप्स दा

एनीमेशनें लेई CSS3 दा इस्तेमाल करदे होई CSS ते जावास्क्रिप्ट कन्नै कस्टम बूटस्ट्रैप टूलटिप्स जोड़ने आस्तै दस्तावेजीकरण ते उदाहरण ते लोकल टाइटल स्टोरेज आस्तै डेटा-एट्रिब्यूट।

अवलोकन करना

टूलटिप प्लगइन दा इस्तेमाल करदे बेल्लै जानने आह्लियां गल्लां:

  • टूलटिप्स स्थिति आस्तै 3rd पार्टी लाइब्रेरी Popper.js पर निर्भर करदे न। टूलटिप्स गी कम्म करने आस्तै तुसेंगी bootstrap.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()
})

उदाहरण दे

टूलटिप्स दिखने लेई निचले लिंक उप्पर होवर करो:

टाइट पैंट नेक्स्ट लेवल केफियेह तुस शायद इन्हें दा नां नेईं सुनेआ ऐ। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। खेत-से-मेज seitan, mcsweeney दी fixie टिकाऊ quinoa 8-बिट अमेरिकी परिधान इक टेरी रिचर्डसन विनाइल chambray ऐ। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney दी साफ शाकाहारी chambray। एक सचमुच विडंबना कारीगर जो भी keytar , scenester खेत-टू-टेबल banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चे डेनिम एकल-मूल कॉफी वायरल।

चार टूलटिप्स दिशा-निर्देशें गी दिक्खने लेई हेठ दित्ते गेदे बटनें उप्पर माउस करो: उप्पर, दाएं, थल्लै, ते बाएं।

<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-responsiveboundary'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'. एह् विकल्प इस चाल्लीं खास तौर उप्पर उपयोगी ऐ जे एह् तुसेंगी ट्रिगर करने आह् ले तत्व दे कोल दस्तावेज दे प्रवाह च टूलटिप गी तैह् त करने दी इजाजत दिंदा ऐ - जेह् ड़ा इक विंडो आकार बदलने दौरान टूलटिप गी ट्रिगर करने आह् ले तत्व थमां दूर तैह् त होने थमां रोकग.
चिर नंबर | चीज ० ऐ

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

जेकर कोई नंबर सप्लाई कीता जंदा ऐ तां छुपा/दिखाने दोनें पर देरी लागू कीती जंदी ऐ

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

टूलटिप च एचटीएमएल दी अनुमति देओ।

जेकर सच्च ऐ तां टूलटिप च HTML टैग टूलटिप titleच रेंडर कीते जाङन. जेकर गलत ऐ तां jQuery दी textविधि दा इस्तेमाल DOM च सामग्री गी सम्मिलित करने लेई कीता जाग.

जेकर तुस XSS हमले दे बारे च चिंतित ओ तां पाठ दा इस्तेमाल करो.
प्लेसमेंट दा तार | फंक्शन 'उप्पर'

टूलटिप गी किस चाल्ली पोजीशन देना ऐ - ऑटो | टॉप | तल | बाईं ओर | स्हेई.
जदूं autoनिर्दिश्ट कीता जंदा ऐ तां एह् टूलटिप गी गतिशील रूप कन्नै दुबारा उन्मुख करग.

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

टूलटिप बनांदे बेल्लै बरतने आस्तै एचटीएमएल दा आधार बनाओ।

टूलटिप दा titleइंजेक्ट कीता जाग .tooltip-inner.

.arrowटूलटिप दा तीर बन जाह्ग।

सबतूं बाहरले रैपर तत्व च .tooltipवर्ग ते role="tooltip".
शीर्शक तार | तत्व | फंक्शन '' ऐ।

titleजेकर विशेषता मौजूद नेईं ऐ तां डिफाल्ट शीर्शक मान .

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

टूलटिप किस चाल्ली ट्रिगर कीता जंदा ऐ - क्लिक करो | होवर करना | फोकस करना | हत्थी. तुस मते सारे ट्रिगर पास करी सकदे ओ; इन्हें इक जगह कन्नै बक्खरा करो।

'manual'.tooltip('show')दर्शांदा ऐ जे टूलटिप गी प्रोग्रामेटिक रूप कन्नै , .tooltip('hide')ते .tooltip('toggle')तरीकें दे राहें ट्रिगर कीता जाग ; इस मान गी कुसै होर ट्रिगर कन्नै नेईं जोड़ेआ जाई सकदा ऐ.

'hover'अपने आपै च टूलटिप्स पैदा होङन जेह् ड़े कीबोर्ड दे राहें ट्रिगर नेईं कीते जाई सकदे न, ते तदूं गै इसदा इस्तेमाल कीता जाना चाहिदा जेकर कीबोर्ड बरतूनी आस्तै इक गै जानकारी देने लेई वैकल्पिक तरीके मौजूद न।
ऑफसेट करना नंबर | तार | फंक्शन ० ऐ

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

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

होर मती जानकारी आस्तै Popper.js दे ऑफसेट डॉक्स दिक्खो .
fallbackप्लेसमेंट करना तार | सरणी 'टक्कर मारना' एह् निर्दिश्ट करने दी अनुमति देओ जे पोपर फॉलबैक पर कुस स्थिति दा इस्तेमाल करग। होर मती जानकारी आस्तै Popper.js दे व्यवहार दस्तावेजें गी दिक्खो
सीमा तार | तत्व 'स्क्रॉलपैरेंट' ऐ। टूलटिप दी ओवरफ्लो बाधा सीमा। 'viewport', 'window', 'scrollParent', जां इक HTMLElement संदर्भ (केवल जावास्क्रिप्ट) दे मूल्यें गी स्वीकार करदा ऐ . होर मती जानकारी आस्तै Popper.js दे preventOverflow डॉक्स दिक्खो .
सेनेटाइज करना बूलियन सच्च सेनेटाइजेशन गी सक्षम जां अक्षम करो। जेकर सक्रिय कीता जाग 'template'ते 'title'विकल्पें गी सेनेटाइज कीता जाग।
सफेदसूची दी चीज डिफ़ॉल्ट मान ऐ वस्तु जिस च अनुमति दित्ती गेदी विशेषताएं ते टैग होंदे न
सेनेटाइज करनाFn शून्य | फंक्शन शून्य इत्थें तुस अपने सेनेटाइज फंक्शन गी सप्लाई करी सकदे ओ। जेकर तुस सेनेटाइजेशन करने लेई समर्पित लाइब्रेरी दा इस्तेमाल करना पसंद करदे ओ तां एह् फायदेमंद होई सकदा ऐ।
पॉपरकॉन्फिग शून्य | चीज शून्य बूटस्ट्रैप दी डिफाल्ट 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इंस्टेंस विधि गी बुलाया गेआ ऐ.
छिपे दा.बी.एस.टूलटिप एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै टूलटिप बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (CSS संक्रमणें गी पूरा होने दा इंतजार करग)।
सम्मिलित कीता।बीएस.टूलटिप एह् घटना उस show.bs.tooltipघटना दे बाद फायर कीती जंदी ऐ जिसलै टूलटिप टेम्पलेट गी DOM च जोड़ेआ गेआ ऐ. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})