टूलटिप्स

अवलोकन

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

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

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

जेना: सब ठाम टूलटिप सक्षम करू

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>

आ कस्टम एचटीएमएल जोडल गेलाक संग:

<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="". डेटा विशेषताक कें माध्यम सं विकल्पक कें पास करय कें समय विकल्प नाम कें केस प्रकार camelCase सं कबाब-केस मे बदलनाय सुनिश्चित करूं. जेना , प्रयोग करबाक बदला 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()

toggleसक्षम कएल गेल

कोनों तत्व कें टूलटिप कें दिखावा या छिपाबै कें क्षमता कें टॉगल करयत छै.

tooltip.toggleEnabled()

अपडेट

कोनो तत्व क' टूलटिप क' स्थिति अपडेट करैत अछि.

tooltip.update()

getInstance

स्थिर विधि जे अहां कें कोनों डोम तत्व सं जुड़ल टूलटिप इंस्टेंस प्राप्त करय कें अनुमति देयत छै

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