Source

साधनाच्यो टिपा

दस्तावेजीकरण आनी थळाव्या शीर्षक सांठवणाखातीर एनिमेशन आनी डेटा-गुणधर्मांखातीर CSS3 वापरून CSS आनी JavaScript कडेन सानुकूल बूटस्ट्रॅप साधनसूची जोडपाखातीर उदाहरणां.

नियाळ

टूलटिप प्लगइन वापरतना कळपाच्यो गजाली:

  • टूलटिप्स स्थिती खातीर 3 व्या पक्षाच्या लायब्ररी Popper.js चेर आदारीत आसात . तुमी bootstrap.js पयलीं popper.min.js समाविष्ट करपाक जाय वा टूलटिप्स काम करपाक bootstrap.bundle.min.js/ वापरपाक जाय जातूंत Popper.js bootstrap.bundle.jsआसा!
  • तुमी आमची जावास्क्रिप्ट स्त्रोतांतल्यान तयार करतात जाल्यार, ताका जायutil.js .
  • टूलटिप्स कार्यक्षमताय कारणांक लागून ऑप्ट-इन आसात, देखून तुमी स्वता तीं आरंभ करपाक जाय .
  • शून्य-लांबाय शीर्षकां आशिल्लीं साधनटिप केन्नाच दाखोवंक नात.
  • container: 'body'चड गुंतागुंतीच्या घटकांत (जशे आमचे इनपुट गट, बटण गट, आदी) रेंडरिंग समस्या टाळपाक निर्देशीत करात .
  • लिपिल्ल्या घटकांचेर टूलटिप्स ट्रिगर करप काम करचें ना.
  • .disabledवा घटकांखातीर साधनटिप्स disabledरॅपर घटकाचेर ट्रिगर करपाक जाय.
  • एका परस चड ओळींचेर पातळिल्ल्या हायपरलिंकांतल्यान ट्रिगर करतना, साधनसुचोवण्यो केंद्रीत आसतले. ही वागणूक टाळपाक white-space: nowrap;तुमच्या s चेर वापरात .<a>
  • साधन टिपां तांचे संबंदीत घटक DOM वयल्यान काडून उडोवचे पयलीं लिपोवंक जाय.
  • सावळी DOM भितरल्या घटकाक लागून टूलटिप्स ट्रिगर करूं येतात.

ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motionमाध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .

तें सगळें मेळ्ळें? ग्रेट, कांय उदाहरणां घेवन ते कशे काम करतात तें पळोवया.

देखीक: सगळेकडेन टूलटिप्स सक्षम करात

पानाचेर सगळ्यो टूलटिप्स आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या data-toggleगुणधर्मा प्रमाणें तीं निवडप:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

उदाहरणां

साधनसुचोवण्यो पळोवपाक सकयल दिल्ल्या दुव्यांचेर होवर करात:

टाइट पॅंट नेक्स्ट लेव्हल केफीयेह तुमी घडये तांचे विशीं आयकूं नात. फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बॅग स्टंपटाउन. फार्म-टू-टेबल seitan, mcsweeney च्या fixie टिकावू क्विनोआ 8-बिट अमेरिकन परिधानांत एक टेरी रिचर्डसन vinyl chambray आसा. दाढी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकॅट्स. टोफू बायोडीझेल विल्यम्सबर्ग मार्फा, चार लोको mcsweeney च्या निवळ वेगन chambray. एक खरोच विडंबनात्मक कारागीर whatever 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 परवानगी दिवची.

खरे आसल्यार, टूलटिपांत HTML टॅग टूलटिपांत titleरेंडर करतले. textखोटें आसल्यार, DOM त सामुग्री घालपाखातीर jQuery ची पद्दत वापरतले.

XSS हल्ल्याचो हुस्को आसल्यार मजकूर वापरात.
प्लेसमेंट करप तार | कार्य 'वयर'

टूलटिप कशें स्थापन करचें - ऑटो | शीर्ष | तळें | उवें | उजवें.
जेन्ना autoनिर्देशीत जाता, तेन्ना तो साधनटिपाक गतिशीलपणान परतून दितले.

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

टूलटिप तयार करतना वापरपाक HTML बेस करात.

टूलटिप चें 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 docs पळयात .
सॅनिटायज करप बूलियन हें नांव खरें सॅनिटायझेशन सक्षम वा अक्षम करचें. सक्रिय केल्यार 'template'आनी 'title'पर्याय सॅनिटायज करतले.
whiteList हें नांव ऑब्जॅक्ट मुलभूत मोल परवानगी दिल्ले गुणधर्म आनी टॅग आशिल्ली वस्तू
सॅनिटायज करपFn शून्य | कार्य शुन्य हांगा तुमी तुमचें स्वताचें सॅनिटायज फंक्शन पुरवण करूंक शकतात. सॅनिटायझेशन करपाक तुमकां समर्पीत लायब्ररी वापरपाक आवडटा जाल्यार हें उपेगी पडूं येता.
popperConfig हें नांव शून्य | ऑब्जॅक्ट शुन्य Bootstrap ची मुलभूत 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.bs.टूलटिप दाखोवचो showदृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता .
दाखयलां.bs.tooltip साधनटिप वापरप्याक दिसपी केल्या उपरांत ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
hide.bs.टूलटिप हें नांव hideदृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता .
लिपलां.बीएस.टूलटिप वापरप्या कडल्यान साधनटिप लिपोवप सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
घाल्लें.bs.tooltip show.bs.tooltipसाधनटिप साचा DOM कडेन जोडल्या उपरांत ही घडणूक घडणुके उपरांत फायर करतात. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})