टूलटिप्स

अवलोकनम्

tooltip plugin इत्यस्य उपयोगं कुर्वन् ज्ञातव्यानि वस्तूनि:

• Tooltips स्थितिनिर्धारणार्थं 3rd party library Popper इत्यस्य उपरि अवलम्बन्ते । भवन्तः bootstrap.js इत्यस्मात् पूर्वं popper.min.js इत्येतत् अवश्यमेव समाविष्टं कुर्वन्तु अथवा bootstrap.bundle.min.js/ इत्यस्य उपयोगं कुर्वन्तु bootstrap.bundle.jsयस्मिन् Popper अस्ति यत् टूल्टिप्स कार्यं कर्तुं शक्नोति!
• Tooltips कार्यप्रदर्शनकारणात् opt-in भवन्ति, अतः भवान् स्वयमेव तान् आरभणीयम् .
• शून्य-दीर्घता-शीर्षक-युक्ताः उपकरण-टिप्स् कदापि न प्रदर्शिताः भवन्ति ।
• container: 'body'अधिकजटिलघटकेषु (यथा अस्माकं निवेशसमूहाः, बटनसमूहाः इत्यादयः) रेण्डरिंगसमस्याः परिहरितुं निर्दिशन्तु ।
• गुप्ततत्त्वेषु उपकरणसूचनानि प्रेरयितुं कार्यं न भविष्यति ।
• .disabledअथवा एलिमेण्ट्स् कृते टूल्टिप्स् disabledएकस्मिन् wrapper एलिमेण्ट् इत्यत्र अवश्यमेव ट्रिगर करणीयम् ।
• बहुपङ्क्तयः विस्तृताः हाइपरलिङ्क्-तः प्रेरिताः भवन्ति चेत्, टूल्टिप्स केन्द्रीकृताः भविष्यन्ति । एतत् व्यवहारं परिहरितुं white-space: nowrap;भवतः s इत्यस्य उपयोगं कुर्वन्तु।<a>
• DOM तः तेषां तत्सम्बद्धानां तत्त्वानां निष्कासनात् पूर्वं टूलटिप्स अवश्यमेव गोपनीया ।
• छाया DOM इत्यस्य अन्तः एकस्य एलिमेण्ट् इत्यस्य धन्यवादेन टूल्टिप् ट्रिगर कर्तुं शक्यते ।

तत् सर्वं प्राप्तम् ? महान्, पश्यामः यत् ते केनचित् उदाहरणैः सह कथं कार्यं कुर्वन्ति।

उदाहरणम् : सर्वत्र टूलटिप्स् सक्षमं कुर्वन्तु

पृष्ठे सर्वाणि साधनसूचनानि आरम्भयितुं एकः उपायः स्यात् यत् तेषां data-bs-toggleविशेषताद्वारा चयनं करणीयम्:

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

उदाहरणानि

उपकरणसूचनानि द्रष्टुं अधोलिङ्कानि उपरि माउसं कुर्वन्तु:

उपरि, दक्षिणं, अधः, वामं च इति चत्वारि साधनसूचनानि द्रष्टुं अधोलिखितानां बटन्-उपरि माउण्ड् कुर्वन्तु । RTL मध्ये Bootstrap इत्यस्य उपयोगं कुर्वन् निर्देशाः प्रतिबिम्बिताः भवन्ति ।

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

एकेन SVG सह: .

सस्स

चर

$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एट्रिब्यूट् भवति तथा titleच HTML एलिमेण्ट् इत्यत्र भवान् टूल्टिप् प्राप्तुम् इच्छति । टूल्टिप् इत्यस्य उत्पन्नं मार्कअपं तु सरलं भवति, यद्यपि तस्य कृते स्थितिः आवश्यकी भवति (पूर्वनिर्धारितरूपेण, 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अन्तरक्रियाशीलाः न सन्ति, अर्थात् उपयोक्तारः उपकरणटिप् (अथवा popover) प्रेरयितुं तान् केन्द्रीक्रियितुं, माउस-करणं, क्लिक् कर्तुं वा न शक्नुवन्ति । एकं कार्यपरिहाररूपेण, भवान् एकस्मात् आवरणात् <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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-animation=""। डेटा विशेषताद्वारा विकल्पान् पारयन्ते सति विकल्पनामस्य case प्रकारं camelCase तः kebab-case मध्ये परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य उपयोगस्य स्थाने data-bs-customClass="beautifier", इत्यस्य उपयोगं कुर्वन्तु data-bs-custom-class="beautifier"।

सह function का प्रयोग करते हुए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()

toggle इति

कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् टॉग्ल् करोति । टूल्टिप् वास्तवतः दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.tooltipor hidden.bs.tooltipइवेण्ट् इत्यस्य भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । इदं टूल्टिप् इत्यस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।

tooltip.toggle()

विसर्जयेत्

एकस्य तत्त्वस्य टूल्टिप् गोपयति नष्टं च करोति (DOM एलिमेण्ट् इत्यत्र संगृहीतदत्तांशं निष्कासयति) । प्रत्यायोजनस्य उपयोगं कुर्वन्ति उपकरणटिप्स् (ये विकल्पस्य उपयोगेन निर्मिताः सन्ति ) selectorवंशज -उद्दीपक-तत्त्वेषु व्यक्तिगतरूपेण नष्टुं न शक्यन्ते ।

tooltip.dispose()

सक्रियं करोतु

एकस्य तत्त्वस्य tooltip दर्शयितुं क्षमता ददाति । Tooltips पूर्वनिर्धारितरूपेण सक्षमाः सन्ति ।

tooltip.enable()

अक्षम

तत्त्वस्य टूल्टिप् दर्शयितुं क्षमताम् अपसारयति । टूल्टिप् केवलं पुनः सक्षमीकरणे एव दर्शयितुं समर्थः भविष्यति ।

tooltip.disable()

toggleEnabled इति

तत्त्वस्य टूल्टिप् दर्शयितुं गोपनं वा कर्तुं क्षमताम् टॉग् करोति ।

tooltip.toggleEnabled()

अद्यतन

कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् इत्यस्य स्थितिं अद्यतनं करोति ।

tooltip.update()

getInstance इति

स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं tooltip उदाहरणं प्राप्तुं शक्नोति

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateइन्स्टेंस इति

स्थिरविधिः या भवन्तं 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()