टूलटिप्स

अवलोकन

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

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

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

उदाहरण: हर जगह टूलटिप्स सक्षम करें

किसी पृष्ठ पर सभी टूलटिप्स को प्रारंभ करने का एक तरीका यह होगा कि उन्हें उनकी data-bs-toggleविशेषता के आधार पर चुना जाए:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

उदाहरण

टूलटिप्स देखने के लिए नीचे दिए गए लिंक पर होवर करें:

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

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

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

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

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

मार्कअप

टूलटिप के लिए आवश्यक मार्कअप केवल एक dataविशेषता है और titleHTML तत्व पर आप टूलटिप रखना चाहते हैं। टूलटिप का उत्पन्न मार्कअप अपेक्षाकृत सरल है, हालांकि इसके लिए एक स्थिति की आवश्यकता होती है (डिफ़ॉल्ट रूप से, topप्लगइन द्वारा सेट)।

<!-- 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=""। डेटा विशेषताओं के माध्यम से विकल्पों को पास करते समय विकल्प नाम के केस प्रकार को कैमलकेस से कबाब-केस में बदलना सुनिश्चित करें। उदाहरण के लिए, उपयोग करने के बजाय data-bs-customClass="beautifier", उपयोग करें data-bs-custom-class="beautifier"।

के साथ फ़ंक्शन का उपयोग करना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()

टॉगल सक्षम

किसी तत्व के टूलटिप को दिखाने या छिपाने की क्षमता को टॉगल करता है।

tooltip.toggleEnabled()

अपडेट करें

किसी तत्व के टूलटिप की स्थिति को अपडेट करता है।

tooltip.update()

दृष्टांत लो

स्टेटिक विधि जो आपको 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

आयोजन

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()