टूलटिप्स

अवलोकन

टूलटिप प्लगइन का उपयोग करते समय जानने योग्य बातें:

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

वह सब मिल गया? बढ़िया, आइए देखें कि वे कुछ उदाहरणों के साथ कैसे काम करते हैं।

उदाहरण

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

जैसा कि ऊपर उल्लेख किया गया है, आपको टूलटिप्स का उपयोग करने से पहले उन्हें इनिशियलाइज़ करना होगा। किसी पृष्ठ पर सभी टूलटिप्स को प्रारंभ करने का एक तरीका यह होगा कि उन्हें उनकी 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"हैं और इसका उपयोग स्थानीय सीएसएस चर को ओवरराइड करने के लिए करते हैं।

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

और कस्टम HTML के साथ जोड़ा गया:

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

एक एसवीजी के साथ:

सीएसएस

चर

बूटस्ट्रैप के विकसित हो रहे सीएसएस चर दृष्टिकोण के हिस्से के रूप में, टूलटिप्स अब .tooltipउन्नत रीयल-टाइम अनुकूलन के लिए स्थानीय सीएसएस चर का उपयोग करते हैं। 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 " से " कबाब-केस " में बदलना सुनिश्चित करें । उदाहरण के लिए, 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()