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>s पर प्रयोग करू ।
  • टूलटिप्स कें ओकर संगत तत्वक कें डीओएम सं हटावय सं पहिले नुकायल करनाय आवश्यक छै.
  • टूलटिप्स क॑ छाया डोम के अंदर के तत्व के बदौलत ट्रिगर करलऽ जाब॑ सकै छै ।

एहि घटक क एनीमेशन प्रभाव 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प्लगइन द्वारा सेट करलऽ गेलऽ छै) ।

कीबोर्ड आ सहायक प्रौद्योगिकी उपयोगकर्ताक कें ��ेल टूलटिप्स कें काज करनाय

अहां कें केवल एचटीएमएल तत्वक मे टूलटिप्स जोड़बाक चाही जे परंपरागत रूप सं कीबोर्ड-केंद्रित आ इंटरैक्टिव (जैना लिंक या फॉर्म नियंत्रण) होयत छै. यद्यपि मनमाना एचटीएमएल तत्व (जैना कि <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="".

नाम प्रकार चुकनाइ वर्णन
एनीमेशन बूलियन सत्य टूलटिप पर एकटा 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'अपनऽ दम प॑ टूलटिप के परिणामस्वरूप होतै जेकरा कीबोर्ड के माध्यम स॑ ट्रिगर नै करलऽ जाब॑ सकै छै, आरू एकरऽ उपयोग तखनिये करलऽ जाय जब॑ कीबोर्ड उपयोगकर्ता लेली एक ही जानकारी संप्रेषित करै के वैकल्पिक तरीका मौजूद होय ।
ऑफसेट नम्बर | डोरी ० टूलटिप के अपन लक्ष्य के सापेक्ष ऑफसेट। अधिक जानकारी क लेल Popper.js क ऑफसेट डॉक्स देखू .
fallbackप्लेसमेंट के बारे में तार | सरणी 'पलटी मरनाइ' ई निर्दिष्ट करबाक अनुमति दिअ जे पॉपर फॉलबैक पर कोन स्थितिक उपयोग करत. अधिक जानकारी क लेल Popper.js क व्यवहार डॉक्स देखू
सीमा तार | तत्त्व 'स्क्रॉलपैरेंट'। टूलटिप के ओवरफ्लो बाधा सीमा। 'viewport', 'window', 'scrollParent', अथवा एकटा HTMLElement संदर्भ (केवल जावास्क्रिप्ट) क' मान स्वीकार करैत अछि . अधिक जानकारी क लेल Popper.js क preventOverflow docs देखू .

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

व्यक्तिगत टूलटिप्स कें लेल विकल्प वैकल्पिक रूप सं डेटा विशेषताक कें उपयोग कें माध्यम सं निर्दिष्ट कैल जा सकय छै, जैना की ऊपर व्याख्या कैल गेल छै.

विधियाँ

अतुल्यकालिक विधि एवं संक्रमण

सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .

अधिक जानकारी के लेल हमर जावास्क्रिप्ट दस्तावेज देखू .

$().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…
})