टूलटिप्स

अवलोकन

टूलटिप प्लगइन क उपयोग करबा काल जानबाक चाही:

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

ओ सब किछु भेटल? बढ़िया, देखू जे किछु उदाहरण के संग कोना काज करैत छथि।

उदाहरण के लिये

टूलटिप्स सक्षम करू

जेना कि ऊपर कहल गेल अछि, टूलटिप के उपयोग करय सं पहिने अहां के ओकरा आरंभ करय पड़त. कोनो पृष्ठ पर सभ टूलटिप के आरंभ करबाक एकटा तरीका ई होयत जे ओकरा ओकर विशेषता द्वारा चुनल जाय 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>

दिशा निर्देश

चारि टूलटिप्स दिशा देखय लेल नीचा देल गेल बटन पर माउस करू: ऊपर, दाहिना, नीचा, आ बामा. आरटीएल मे बूटस्ट्रैप कें उपयोग करय कें समय निर्देशक कें मिरर कैल जायत छै.

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

एकटा एसवीजी के संग:

सीएसएस

चर

बूटस्ट्रैप कें विकसित 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 ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के data-bs-custom-class="beautifier"बदला मे प्रयोग करू data-bs-customClass="beautifier".

बूटस्ट्रैप 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()