मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

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

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

ह्या पानाचेर

नियाळ

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

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

उदाहरणां

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

साधन टिपां सयत कांय इनलायन दुवे दाखोवपाक प्लेसहोल्डर मजकूर . हें आतां फकत फिलर, किलर ना. फकत खऱ्या मजकूराच्या उपस्थितीची नक्कल करपा खातीर हांगा दवरिल्ली आशय . आनी तें सगळें फकत तुमकां खऱ्या संवसारांतल्या परिस्थितींत वापरल्यार टूलटिप्स कशे दिसतले हाची कल्पना दिवपा खातीर. तर आशेन तुमी आतां पळयलां दुव्याचेर आशिल्लीं हीं टूलटिप्स वेव्हारांत कशीं काम करूंक शकतात, एकदां तुमी तीं तुमच्या स्वताच्या साइटचेर वा प्रकल्पाचेर वापरल्या उपरांत.

चार टूलटिप्स दिका पळोवपाक सकयल दिल्ल्या बटणांचेर माऊस करात: वयर, उजवें, सकयल, आनी डावें. RTL त Bootstrap वापरतना दिश्टीकोन मिरर जातात.

<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वा आवडटा , पूण तरी लेगीत मूळ प्लेसमेंटाची स्थिती दवरता. हें सोडोवपाखातीर, मुलभूत मोल अधिलिखित करपाखातीर पर्याय (पर्याय वापरपी फ्लिप संशोधकाखातीर) खंयच्याय HTMLElement चेर सेट करात, , जशे की :overflow: scroll.table-responsiveboundarypopperConfig'clippingParents'document.body

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

मार्कअप करप

टूलटिपा खातीर गरजेचो मार्कअप फकत एक dataगुणधर्म आसा आनी titleHTML घटकाचेर तुमकां टूलटिप आसपाक जाय. साधनटिपाचो निर्माण केल्लो मार्कअप मातसो सोपो आसा, जरी ताका एक सुवात जाय पडटा (मुळाव्यान, 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 वयल्यान kebab-case कडेन बदलपाची खात्री करात. देखीक, वापरचे बदला data-bs-customClass="beautifier"वापरात data-bs-custom-class="beautifier".

लक्षांत दवरात की सुरक्षेच्या कारणांक लागून sanitize, sanitizeFn, आनी allowListपर्याय डेटा गुणधर्म वापरून पुरवण करूंक शकना.
नांव प्रकार डिफॉल्ट वर्णन
animation बूलियन हें नांव true साधनटिपाचेर CSS फेड संक्रमण लागू करात
container तार | तत्व | फट false

साधनटिप एका विशिश्ट घटकाक जोडटा. देखीक: container: 'body'. हो पर्याय खासा उपेगी आसा कारण तो तुमकां साधनटिप ट्रिगर करपी घटका लागसार दस्तावेजाच्या प्रवाहांत दवरपाक परवानगी दिता - जे विंडो आकार बदलतना साधनटिप ट्रिगर करपी घटका पासून पयस उडपाक आडायतलें.
delay संख्या | ऑब्जॅक्ट 0

साधनटिप दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना

क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता

वस्तूची रचणूक अशी आसा: १.delay: { "show": 500, "hide": 100 }
html बूलियन हें नांव false

टूलटिपांत HTML परवानगी दिवची.

खरे आसल्यार, टूलटिपांत HTML टॅग टूलटिपांत titleरेंडर करतले. खोटें आसल्यार, innerTextDOM त सामुग्री घालपाक गुणधर्म वापरतले.

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

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

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

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

टूलटिप चें titleइंजेक्शन दितले .tooltip-inner.

.tooltip-arrowटूलटिपाचो बाण जातलो.

सगळ्यांत भायल्या आवरण घटकाक .tooltipवर्ग आनी role="tooltip".
title तार | तत्व | कार्य ''

titleगुणधर्म हाजीर ना जाल्यार मुलभूत शीर्षक मोल .

फंक्शन दिल्लें आसल्यार, thisटूलटिप जोडिल्ल्या घटकाक ताचो संदर्भ संच करून ताका कॉल करतले.
trigger माळ 'hover focus'

टूलटिप कसो ट्रिगर जाता - क्लिक करात | होवर करप | लक्ष केंद्रीत करप | मॅन्युअल. तुमी जायते ट्रिगर पास करूंक शकतात; तांकां एक जाग्यान वेगळें करतात.

'manual'साधनटिप .show(), .hide()आनी .toggle()पद्दती वरवीं प्रोग्रामेटिक रितीन ट्रिगर जातलें अशें दाखयता; हें मोल हेर खंयच्याय ट्रिगराक जोडूंक शकना.

'hover'स्वताचेर कीबोर्ड वरवीं ट्रिगर करपाक मेळनात अशे साधनसुचोवण्यो परिणाम जातले, आनी कीबोर्ड वापरप्यां खातीर समान म्हायती दिवपाच्यो पर्यायी पद्दती हाजीर आसल्यारच वापरपाक जाय.
fallbackPlacements सरणी ['top', 'right', 'bottom', 'left'] ऍरेंतल्या प्लेसमेंटांची वळेरी दिवन (पसंतीच्या क्रमांकान) फॉलबॅक प्लेसमेंट व्याख्या करात. चड म्हायती खातीर Popper च्या वर्तनाच्या डॉक्स पळयात
boundary तार | घटक 'clippingParents' साधनटिपाची ओव्हरफ्लो बंधन मर्यादा (फकत Popper च्या preventOverflow संशोधकाक लागू जाता). पूर्वनिर्धारीतपणान तो 'clippingParents'HTMLElement संदर्भ आसा आनी मान्य करूंक शकता (फकत JavaScript वरवीं). चड म्हायती खातीर पळयात Popper's detectOverflow docs .
customClass तार | कार्य ''

टूलटिप दाखयता तेन्ना वर्ग जोडात. लक्षांत दवरात की हे वर्ग साच्यांत निर्देशीत केल्ल्या खंयच्याय वर्गांवांगडाच जोडटले. जायते वर्ग जोडपाक, तांकां रिक्तींनी वेगळे करात: 'class-1 class-2'.

तुमी एक फंक्शनय पास करूंक शकतात जें अतिरिक्त वर्ग नांवां आशिल्ली एकूच स्ट्रिंग परत दिवपाक जाय.
sanitize बूलियन हें नांव true सॅनिटायझेशन सक्षम वा अक्षम करचें. सक्रिय केल्यार 'template'आनी 'title'पर्याय सॅनिटायज करतले. आमच्या जावास्क्रिप्ट दस्तावेजीकरणांतलो सॅनिटायझर विभाग पळयात .
allowList ऑब्जॅक्ट मुलभूत मोल परवानगी दिल्ले गुणधर्म आनी टॅग आशिल्ली वस्तू
sanitizeFn शून्य | कार्य null हांगा तुमी तुमचें स्वताचें सॅनिटायज फंक्शन पुरवण करूंक शकतात. सॅनिटायझेशन करपाक तुमकां समर्पीत लायब्ररी वापरपाक आवडटा जाल्यार हें उपेगी पडूं येता.
offset सरणी | तार | कार्य [0, 0]

ताच्या लक्ष्याच्या सापेक्ष टूलटिपाचो ऑफसेट. तुमी स्वल्पविराम वेगळीं केल्ल्या मोलां सयत डेटा गुणधर्मांत स्ट्रिंग पास करूंक शकतात जशे की:data-bs-offset="10,20"

जेन्ना ऑफसेट थारावपाखातीर फंक्शन वापरतात तेन्ना ताका पॉपर प्लेसमेंट, संदर्भ आनी पॉपर रेक्ट्स हें ताचो पयलो आर्ग्युमेंट म्हणून आशिल्ल्या वस्तून कॉल करतात. ट्रिगर करपी घटक DOM नोड दुसरो आर्ग्युमेंट म्हणून पास जाता. फंक्शनान दोन क्रमांक आशिल्ली ऍरे परत दिवपाक जाय: .[skidding, distance]

चड म्हायती खातीर पळयात Popper's offset docs .
popperConfig शून्य | वस्तू | कार्य null

Bootstrap ची मुलभूत Popper संरचना बदलपाक, पळयात Popper ची संरचना .

जेन्ना Popper संरचना तयार करपाक फंक्शन वापरतात, तेन्ना तें Bootstrap ची मुलभूत Popper संरचना आशिल्ल्या वस्तून कॉल करतात. तो तुमकां तुमच्या स्वताच्या संरचने वांगडा मुलभूत वापरपाक आनी विलीन करपाक मदत करता. फंक्शनान Popper खातीर संरचना वस्तू परत दिवपाक जाय.

वैयक्तीक साधनसुपांखातीर डेटा गुणधर्म

वैयक्तीक साधनसुपां खातीर पर्याय पर्यायीपणान डेटा गुणधर्मांच्या वापरा वरवीं निर्देशीत करूंक शकतात, वयर स्पश्ट केल्ल्या प्रमाणें.

कडेन फंक्शन वापरप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()

toggleसक्षम केला

घटकाची साधनटिप दाखोवपाची वा लिपोवपाची क्षमता टॉगल करता.

tooltip.toggleEnabled()

अपडेट

घटकाच्या साधनटिपाची सुवात अद्ययावत करता.

tooltip.update()

getInstance हें नांव

स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत आशिल्ली टूलटिप दृष्टांत मेळोवपाक परवानगी दिता

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()