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

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

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

ह्या पानाचेर

नियाळ

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

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

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

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

उदाहरणां

साधनसूची सक्षम करात

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

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

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

एचटीएमएल हें नांव 
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>
तुमच्या एचटीएमएलांत एक titleवा वापरपाक मेकळेपणान सांगात . data-bs-titleजेन्ना titleवापरतात, तेन्ना Popper आपोआप ताचे सुवातेर data-bs-titleघटक रेंडर करतना बदलतलो.

सानुकूल साधनसुविधा

v5.2.0 त जोडलां

तुमी CSS चड-उणें वापरून साधनसुचोवण्यो दिसप पसंतीचे करूंक शकतात . data-bs-custom-class="custom-tooltip"आमी आमच्या सानुकूल दिसपाक व्याप्ती दिवपाक सानुकूल वर्ग सेट करतात आनी थळाव्या CSS चडांत चड ओव्हररायड करपाक वापरतात.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}
एचटीएमएल हें नांव 
<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

दिका दिवप

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

आनी सानुकूल एचटीएमएल जोडल्या वांगडा:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

एसव्हीजी वांगडा:

सीएसएस हें नांव

चड-उणें

v5.2.0 त जोडलां

Bootstrap च्या विकसीत जावपी CSS चड-उणें पद्दतीचो एक भाग म्हूण, साधन टिपा आतां .tooltipवाडयल्ल्या रियल-टायम पसंतीखातीर थळाव्या CSS चड-उणें चालू वापरतात. CSS चयापचयांखातीर मोलां Sass वरवीं सेट केल्लीं आसात, देखून Sass पसंतीचें अजूनय समर्थीत आसा, तेंय.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

सॅस चड-उणें

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

वापर

साधन टिप प्लगइन मागणीचेर सामुग्री आनी मार्कअप तयार करता, आनी पूर्वनिर्धारीतपणान साधन टिपां तांच्या ट्रिगर घटका उपरांत दवरता.

जावास्क्रिप्ट वरवीं टूलटिप ट्रिगर करात:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)
ओव्हरफ्लो autoआनीscroll

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात म्हणून, तुमी पर्याय नांव जोडूंक शकतात data-bs-, जशें data-bs-animation="{value}". डेटा गुणधर्मां वरवीं पर्याय पास करतना पर्याय नांवाचो केस प्रकार “ camelCase ” वयल्यान “ kebab -case ” कडेन बदलपाची खात्री करात . देखीक, data-bs-custom-class="beautifier"बदला वापरात data-bs-customClass="beautifier".

Bootstrap 5.2.0 प्रमाणें, सगळे घटक प्रायोगिक राखीव डेटा गुणधर्माक तेंको दितात data-bs-configजे JSON स्ट्रिंग म्हणून सादें घटक संरचना दवरूंक शकता. जेन्ना घटकाक data-bs-config='{"delay":0, "title":123}'आनी data-bs-title="456"गुणधर्म आसतात, तेन्ना निमाणें titleमोल आसतलें 456आनी वेगळे डेटा गुणधर्म चेर दिल्ल्या मोलांक अधिलिखित करतले data-bs-config. ते भायर, सद्याचे डेटा गुणधर्म JSON मोलां सारकीं दवरपाक सक्षम आसात data-bs-delay='{"show":0,"hide":150}'.

लक्षांत दवरात की सुरक्षेच्या कारणांक लागून sanitize, sanitizeFn, आनी allowListपर्याय डेटा गुणधर्म वापरून पुरवण करूंक शकना.
नांव प्रकार डिफॉल्ट वर्णन
allowList ऑब्जॅक्ट मुलभूत मोल परवानगी दिल्ले गुणधर्म आनी टॅग आशिल्ली वस्तू.
animation बूलियन हें नांव true साधनटिपाचेर CSS फेड संक्रमण लागू करात.
boundary तार, घटक 'clippingParents' साधनटिपाची ओव्हरफ्लो बंधन मर्यादा (फकत Popper च्या preventOverflow संशोधकाक लागू जाता). पूर्वनिर्धारीतपणान, तो 'clippingParents'HTMLElement संदर्भ आसा आनी मान्य करूंक शकता (फकत JavaScript वरवीं). चड म्हायती खातीर पळयात Popper's detectOverflow docs .
container तार, घटक, खोटें false साधनटिप एका विशिश्ट घटकाक जोडटा. देखीक: container: 'body'. हो पर्याय खासा उपेगी आसा कारण तो तुमकां साधनटिप ट्रिगर करपी घटका लागसार दस्तावेजाच्या प्रवाहांत दवरपाक परवानगी दिता - जे विंडो आकार बदलतना साधनटिप ट्रिगर करपी घटका पासून पयस उडपाक आडायतलें.
customClass स्ट्रिंग, फंक्शन '' टूलटिप दाखयता तेन्ना वर्ग जोडात. लक्षांत दवरात की हे वर्ग साच्यांत निर्देशीत केल्ल्या खंयच्याय वर्गांवांगडाच जोडटले. जायते वर्ग जोडपाक, तांकां रिक्तींनी वेगळे करात: 'class-1 class-2'. तुमी एक फंक्शनय पास करूंक शकतात जें अतिरिक्त वर्ग नांवां आशिल्ली एकूच स्ट्रिंग परत दिवपाक जाय.
delay संख्या, वस्तू 0 साधनटिप दाखोवपाक आनी लिपोवपाक कळाव (ms)—हस्त हाताळणी ट्रिगर प्रकाराक लागू जायना. क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता. वस्तूची रचणूक अशी आसा: delay: { "show": 500, "hide": 100 }.
fallbackPlacements सरणी ['top', 'right', 'bottom', 'left'] ऍरेंतल्या प्लेसमेंटांची वळेरी दिवन (पसंतीच्या क्रमांकान) फॉलबॅक प्लेसमेंट व्याख्या करात. चड म्हायती खातीर पळयात Popper's behavior docs .
html बूलियन हें नांव false टूलटिपांत HTML परवानगी दिवची. खरे आसल्यार, टूलटिपांत HTML टॅग टूलटिपांत titleरेंडर करतले. खोटें आसल्यार, innerTextDOM त सामुग्री घालपाक गुणधर्म वापरतले. XSS हल्ल्याचो हुस्को आसल्यार मजकूर वापरात.
offset ऍरे, स्ट्रिंग, फंक्शन [0, 0] ताच्या लक्ष्याच्या सापेक्ष टूलटिपाचो ऑफसेट. तुमी स्वल्पविराम वेगळे केल्ल्या मोलां सयत डेटा गुणधर्मांत स्ट्रिंग पास करूंक शकतात जशे की: data-bs-offset="10,20". जेन्ना ऑफसेट थारावपाखातीर फंक्शन वापरतात तेन्ना ताका पॉपर प्लेसमेंट, संदर्भ आनी पॉपर रेक्ट्स हें ताचो पयलो आर्ग्युमेंट म्हणून आशिल्ल्या वस्तून कॉल करतात. ट्रिगर करपी घटक DOM नोड दुसरो आर्ग्युमेंट म्हणून पास जाता. फंक्शनान दोन क्रमांक आशिल्ली ऍरे परत दिवपाक जाय: skidding , distance . चड म्हायती खातीर पळयात Popper's offset docs .
placement स्ट्रिंग, फंक्शन 'top' टूलटिप कशें दवरप: ऑटो, वयर, सकयल, डावें, उजवें. जेन्ना autoनिर्देशीत जाता, तेन्ना तो साधनटिपाक गतिशीलपणान परतून दितले. जेन्ना प्लेसमेंट थारावपाखातीर फंक्शन वापरतात तेन्ना ताका टूलटिप DOM नोड हो पयलो आर्ग्युमेंट आनी ट्रिगरिंग एलिमेंट DOM नोड दुसरो असो कॉल करतात. संदर्भ thisटूलटिप दृष्टांताचेर सेट केला.
popperConfig शून्य, वस्तू, कार्य null Bootstrap ची मुलभूत Popper संरचना बदलपाक, पळयात Popper ची संरचना . जेन्ना Popper संरचना तयार करपाक फंक्शन वापरतात, तेन्ना तें Bootstrap ची मुलभूत Popper संरचना आशिल्ल्या वस्तून कॉल करतात. तो तुमकां तुमच्या स्वताच्या संरचने वांगडा मुलभूत वापरपाक आनी विलीन करपाक मदत करता. फंक्शनान Popper खातीर संरचना वस्तू परत दिवपाक जाय.
sanitize बूलियन हें नांव true सॅनिटायझेशन सक्षम वा अक्षम करचें. If activated 'template', 'content'आनी 'title'पर्याय सॅनिटायज जातले.
sanitizeFn शून्य, कार्य null हांगा तुमी तुमचें स्वताचें सॅनिटायज फंक्शन पुरवण करूंक शकतात. सॅनिटायझेशन करपाक तुमकां समर्पीत लायब्ररी वापरपाक आवडटा जाल्यार हें उपेगी पडूं येता.
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'साधनटिप .tooltip('show'), .tooltip('hide')आनी .tooltip('toggle')पद्दती वरवीं प्रोग्रामेटिक रितीन ट्रिगर जातलें अशें दाखयता; हें मोल हेर खंयच्याय ट्रिगराक जोडूंक शकना. 'hover'स्वताचेर कीबोर्ड वरवीं ट्रिगर करपाक मेळनात अशे साधनसुचोवण्यो परिणाम जातले, आनी कीबोर्ड वापरप्यां खातीर समान म्हायती दिवपाच्यो पर्यायी पद्दती हाजीर आसल्यारच वापरपाक जाय.

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

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

कडेन फंक्शन वापरपpopperConfig 

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

पद्दती

अतुल्यकालिक पद्दती आनी संक्रमण

सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .

चड म्हायती खातीर आमचें जावास्क्रिप्ट दस्तावेज पळयात .

पद्दत वर्णन
disable घटकाच्या टूलटिपाक दाखोवपाची क्षमता काडून उडयता. साधनटिप फकत परतून सक्षम केल्यारच दाखोवंक शकतले.
dispose घटकाची साधनटिप लिपयता आनी नश्ट करता (DOM घटकाचेर सांठयल्लो डेटा काडून उडयता). प्रतिनिधीत्व वापरपी साधनटिप (जे पर्याय वापरून तयार केल्यात ) selectorवंशज ट्रिगर घटकांचेर वैयक्तीकपणान नश्ट करूंक शकना.
enable एका घटकाच्या टूलटिपाक दाखोवपाची तांक दिता. साधनटिप्स पूर्वनिर्धारीतपणान सक्षम केल्यात.
getInstance स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत साधनटिप दृष्टांत मेळोवपाक परवानगी दिता, वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करपाक परवानगी दिता.
getOrCreateInstance स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत साधनटिप दृष्टांत मेळोवपाक परवानगी दिता, वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करपाक परवानगी दिता.
hide घटकाची टूलटिप लिपयता. साधनटिप प्रत्यक्षांत लिपोवचे पयलीं (म्हळ्यार hidden.bs.tooltipघडणूक घडचे पयलीं) कॉलराक परतता. हें टूलटिपाचें “हस्तिका” ट्रिगरिंग मानतात.
setContent टूलटिपाची आशय ताची आरंभ केल्या उपरांत बदलपाचो मार्ग दिता.
show एका घटकाची टूलटिप उक्ती करता. साधनटिप प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.tooltipघडणूक घडचे पयलीं) कॉलराक परतता. हें टूलटिपाचें “हस्तिका” ट्रिगरिंग मानतात. शून्य लांबाय शीर्षकां आशिल्लीं साधनटिप केन्नाच दाखयना.
toggle घटकाचो टूलटिप टॉगल करता. साधनटिप प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार shown.bs.tooltipवा hidden.bs.tooltipघडणूक घडचे पयलीं) कॉलराक परतता. हें टूलटिपाचें “हस्तिका” ट्रिगरिंग मानतात.
toggleEnabled घटकाची साधनटिप दाखोवपाची वा लिपोवपाची क्षमता टॉगल करता.
update घटकाच्या साधनटिपाची सुवात अद्ययावत करता. 
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })
पद्दत setContentएक युक्तिवाद स्वीकारता , जंय दरेक गुणधर्म-की पॉपओवर साच्या भितर objectवैध निवडक आसा , आनी दरेक संबंदीत गुणधर्म-मूल्य | | | stringstringelementfunctionnull

घडणुको

प्रसंग वर्णन
hide.bs.tooltip hideदृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता .
hidden.bs.tooltip वापरप्या कडल्यान पोपोव्हर लिपोवप सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
inserted.bs.tooltip show.bs.tooltipसाधनटिप साचा DOM कडेन जोडल्या उपरांत ही घडणूक घडणुके उपरांत फायर करतात.
show.bs.tooltip showदृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता .
shown.bs.tooltip वापरप्याक पॉपओव्हर दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). 
const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()