साधनाच्यो टिपा
दस्तावेजीकरण आनी थळाव्या शीर्षक सांठवणाखातीर एनिमेशन आनी डेटा-गुणधर्मांखातीर CSS3 वापरून CSS आनी JavaScript कडेन सानुकूल बूटस्ट्रॅप साधनसूची जोडपाखातीर उदाहरणां.
नियाळ
टूलटिप प्लगइन वापरतना कळपाच्यो गजाली:
- टूलटिप्स स्थिती खातीर 3 व्या पक्षाच्या लायब्ररी पॉपराचेर आदारीत आसात . तुमी bootstrap.js पयलीं popper.min.js समाविष्ट करपाक जाय वा टूलटिप्स काम करपाक
bootstrap.bundle.min.js
/ वापरपाक जायbootstrap.bundle.js
जातूंत Popper आसा! - तुमी आमची जावास्क्रिप्ट स्त्रोतांतल्यान तयार करतात जाल्यार, ताका जाय
util.js
. - टूलटिप्स कार्यक्षमताय कारणांक लागून ऑप्ट-इन आसात, देखून तुमी स्वता तीं आरंभ करपाक जाय .
- शून्य-लांबाय शीर्षकां आशिल्लीं साधनटिप केन्नाच दाखोवंक नात.
container: 'body'
चड गुंतागुंतीच्या घटकांत (जशे आमचे इनपुट गट, बटण गट, आदी) रेंडरिंग समस्या टाळपाक निर्देशीत करात .- लिपिल्ल्या घटकांचेर टूलटिप्स ट्रिगर करप काम करचें ना.
.disabled
वा घटकांखातीर साधनटिप्सdisabled
रॅपर घटकाचेर ट्रिगर करपाक जाय.- एका परस चड ओळींचेर पातळिल्ल्या हायपरलिंकांतल्यान ट्रिगर करतना, साधनसुचोवण्यो केंद्रीत आसतले. ही वागणूक टाळपाक
white-space: nowrap;
तुमच्या s चेर वापरात .<a>
- साधन टिपां तांचे संबंदीत घटक DOM वयल्यान काडून उडोवचे पयलीं लिपोवंक जाय.
- सावळी DOM भितरल्या घटकाक लागून टूलटिप्स ट्रिगर करूं येतात.
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
HTML घटकाचेर तुमकां टूलटिप आसपाक जाय. साधनटिपाचो निर्माण केल्लो मार्कअप मातसो सोपो आसा, जरी ताका एक सुवात जाय पडटा (मुळाव्यान, 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 फेड संक्रमण लागू करात |
आयदनांत घालतात | तार | तत्व | फट | फट | साधनटिप एका विशिश्ट घटकाक जोडटा. देखीक: |
कळाव | संख्या | ऑब्जॅक्ट | ० आनी ० | साधनटिप दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता वस्तूची रचणूक अशी आसा: १. |
एचटीएमएल हें नांव | बूलियन हें नांव | फट | टूलटिपांत HTML परवानगी दिवची. खरे आसल्यार, टूलटिपांत HTML टॅग टूलटिपांत XSS हल्ल्याचो हुस्को आसल्यार मजकूर वापरात. |
प्लेसमेंट करप | तार | कार्य | 'वयर' | टूलटिप कशें स्थापन करचें - ऑटो | शीर्ष | तळें | उवें | उजवें. जेन्ना प्लेसमेंट थारावपाखातीर फंक्शन वापरतात, तेन्ना ताका टूलटिप DOM नोड ताचो पयलो आर्ग्युमेंट आनी ट्रिगरिंग एलिमेंट DOM नोड दुसरो म्हणून कॉल करतात. संदर्भ |
निवडक अशें म्हण्टात | तार | फट | फट | निवडक पुरवण केल्यार, साधनटिप वस्तू निर्दिश्ट लक्ष्यांक प्रत्यायित करतले. jQuery.on वेव्हारांत, हाचो वापर गतिशीलपणान जोडिल्ल्या DOM घटकांक ( आदार) साधनसुचोवण्योय लागू करपाक जाता . हें आनी एक माहितीपूर्ण उदाहरण पळयात . |
साचा | माळ | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
टूलटिप तयार करतना वापरपाक HTML बेस करात. टूलटिप चें
सगळ्यांत भायल्या आवरण घटकाक |
शीर्षक | तार | तत्व | कार्य | '' हें . |
फंक्शन दिल्लें आसल्यार, |
ट्रीगर | माळ | 'होवर फोकस'. | टूलटिप कसो ट्रिगर जाता - क्लिक करात | होवर करप | लक्ष केंद्रीत करप | मॅन्युअल. तुमी जायते ट्रिगर पास करूंक शकतात; तांकां एक जाग्यान वेगळें करतात.
|
ऑफसेट करप | संख्या | तार | कार्य | ० आनी ० | ताच्या लक्ष्याच्या सापेक्ष टूलटिपाचो ऑफसेट. ऑफसेट थारावपाखातीर फंक्शन वापरतात तेन्ना ऑफसेट डेटा आशिल्ल्या वस्तूक ताचो पयलो आर्ग्युमेंट म्हणून कॉल करतात. फंक्शनान तीच रचणूक आशिल्ली वस्तू परत करपाक जाय. ट्रिगर करपी घटक DOM नोड दुसरो आर्ग्युमेंट म्हणून पास जाता. चड म्हायती खातीर पळयात Popper's offset docs . |
fallbackप्लेसमेंट करप | तार | सरणी | 'टिचकी' | फॉलबॅकाचेर पॉपर खंयची स्थिती वापरतलो तें स्पश्ट करपाक परवानगी दिवची. चड म्हायती खातीर Popper च्या वर्तनाच्या डॉक्स पळयात |
customClass हें नांव | तार | कार्य | '' हें . | टूलटिप दाखयता तेन्ना वर्ग जोडात. लक्षांत दवरात की हे वर्ग साच्यांत निर्देशीत केल्ल्या खंयच्याय वर्गांवांगडाच जोडटले. जायते वर्ग जोडपाक, तांकां रिक्तींनी वेगळे करात: तुमी एक फंक्शनय पास करूंक शकतात जें अतिरिक्त वर्ग नांवां आशिल्ली एकूच स्ट्रिंग परत दिवपाक जाय. |
शिमेचेर आसता | तार | घटक | 'स्क्रॉलपॅरेंट'. | टूलटिपाची ओव्हरफ्लो बंधन मर्यादा. 'viewport' , 'window' , 'scrollParent' , वा HTMLElement संदर्भ (फकत जावास्क्रिप्ट) ची मोलां स्वीकारता . चड म्हायती खातीर पळयात Popper च्या preventOverflow docs . |
सॅनिटायज करप | बूलियन हें नांव | खरें | सॅनिटायझेशन सक्षम वा अक्षम करचें. सक्रिय केल्यार 'template' आनी 'title' पर्याय सॅनिटायज करतले. आमच्या जावास्क्रिप्ट दस्तावेजीकरणांतलो सॅनिटायझर विभाग पळयात . |
whiteList हें नांव | ऑब्जॅक्ट | मुलभूत मोल | परवानगी दिल्ले गुणधर्म आनी टॅग आशिल्ली वस्तू |
सॅनिटायज करपFn | शून्य | कार्य | शुन्य | हांगा तुमी तुमचें स्वताचें सॅनिटायज फंक्शन पुरवण करूंक शकतात. सॅनिटायझेशन करपाक तुमकां समर्पीत लायब्ररी वापरपाक आवडटा जाल्यार हें उपेगी पडूं येता. |
popperConfig हें नांव | शून्य | ऑब्जॅक्ट | शुन्य | Bootstrap ची मुलभूत Popper संरचना बदलपाक, Popper ची संरचना पळयात |
वैयक्तीक साधनसुपांखातीर डेटा गुणधर्म
वैयक्तीक साधनसुपां खातीर पर्याय पर्यायीपणान डेटा गुणधर्मांच्या वापरा वरवीं निर्देशीत करूंक शकतात, वयर स्पश्ट केल्ल्या प्रमाणें.
पद्दती
अतुल्यकालिक पद्दती आनी संक्रमण
सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .
$().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...
})