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

नियाळ

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

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

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

उदाहरणां

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

वयर सांगिल्ले प्रमाणें, तुमी टूलटिप्स वापरचे पयलीं आरंभ करपाक जाय. पानाचेर सगळ्यो टूलटिप्स आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या 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>

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

तुमी 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>

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

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

चड-उणें

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)

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

मार्कअप करप

टूलटिपा खातीर गरजेचो मार्कअप फकत एक dataगुणधर्म आसा आनी titleHTML घटकाचेर तुमकां टूलटिप आसपाक जाय. टूलटिपाचो निर्माण केल्लो मार्कअप मातसो सोपो आसा, जरी ताका एक सुवात जाय पडटा (मुळाव्यान, topप्लगइनान सेट केला).

<!-- 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}'.

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

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

पद्दती

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

घडणुको

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()