मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

टूलटिप्स

एनिमेषन् कृते CSS3 इत्यस्य उपयोगेन CSS तथा JavaScript इत्यनेन सह कस्टम् Bootstrap tooltips योजयितुं दस्तावेजीकरणं उदाहरणानि च तथा च स्थानीयशीर्षकभण्डारणार्थं data-bs-attributes इति।

इस पृष्ठ पर

अवलोकनम्

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

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

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

पूर्वनिर्धारितरूपेण, अयं घटकः अन्तःनिर्मितसामग्री-सैनिटाइजर् इत्यस्य उपयोगं करोति, यत् स्पष्टतया अनुमतं न भवति इति किमपि HTML-तत्त्वं विच्छिन्दति । अधिकविवरणार्थं अस्माकं JavaScript documentation मध्ये sanitizer इति विभागं पश्यन्तु ।
अस्य घटकस्य एनिमेशन-प्रभावः prefers-reduced-motionमीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

उदाहरणानि

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

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

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

उपकरणसूचनैः सह केचन इनलाइनलिङ्कानि प्रदर्शयितुं स्थानधारकपाठः । इदं इदानीं केवलं पूरकम्, न घातकः। केवलं वास्तविकपाठस्य उपस्थितेः अनुकरणार्थं अत्र स्थापिता सामग्री . तथा च तत् सर्वं केवलं भवन्तं विचारं दातुं यत् वास्तविक-जगतः परिस्थितिषु उपयुज्यमानाः साधन-सूचनानि कथं दृश्यन्ते इति। अतः आशास्ति यत् भवान् इदानीं दृष्टवान् यत् लिङ्क्-विषये एतानि साधन-सूचनानि कथं व्यवहारे कार्यं कर्तुं शक्नुवन्ति, एकवारं भवान् स्वस्य साइट्-स्थाने वा परियोजनायां वा तान् उपयुज्यते ।

html 
<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>
titleएकं वा data-bs-titleस्वस्य HTML मध्ये वा उपयोक्तुं निःशङ्कं भवन्तु । यदा titleउपयुज्यते तदा Popper स्वयमेव तत् प्रतिस्थापयिष्यति data-bs-titleयदा तत्त्वं प्रतिपादितं भवति ।

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

v5.2.0 इत्यस्मिन् योजितम्

CSS चरानाम् उपयोगेन साधनसूचनानां स्वरूपं अनुकूलितुं शक्नुवन्ति | वयं अस्माकं कस्टम् रूपं व्याप्त्यर्थं कस्टम् क्लास् सेट् कुर्मः data-bs-custom-class="custom-tooltip"तथा च स्थानीय CSS चर इत्यस्य ओवरराइड् कर्तुं तस्य उपयोगं कुर्मः ।

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}
html 
<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>

दिशानिर्देशः

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

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

एकेन SVG सह : .

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्

Bootstrap इत्यस्य विकसितस्य 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)
अतिप्रवाहः autoचscroll

Tooltip स्थितिः स्वयमेव परिवर्तयितुं प्रयतते यदा मातापितृपात्रस्य अस्माकं भवति overflow: autoवा overflow: scrollइव .table-responsive, परन्तु तदपि मूलस्थापनस्य स्थितिं धारयति । एतस्य समाधानार्थं, पूर्वनिर्धारितमूल्यं अधिलिखितुं boundaryविकल्पं (विकल्पस्य उपयोगेन flip modifier कृते ) कस्मिंश्चित् HTMLElement इत्यत्र सेट् कुर्वन्तु, , यथा :popperConfig'clippingParents'document.body

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

मार्कअप

टूल्टिप् कृते आवश्यकं मार्कअपं केवलं dataएट्रिब्यूट् भवति तथा titleच HTML एलिमेण्ट् इत्यत्र भवान् टूल्टिप् प्राप्तुम् इच्छति । टूल्टिप् इत्यस्य उत्पन्नं मार्कअपं तु सरलं भवति, यद्यपि तस्य कृते स्थितिः आवश्यकी भवति (पूर्वनिर्धारितरूपेण, topप्लगिन् द्वारा सेट् भवति) ।

कीबोर्डस्य सहायकप्रौद्योगिकीप्रयोक्तृणां च कृते टूलटिप्स कार्यं कर्तुं करणम्

भवद्भिः केवलं HTML-तत्त्वेषु उपकरणसूचनानि योजितव्यानि ये पारम्परिकरूपेण कीबोर्ड-केन्द्रीकरणीयाः सन्ति तथा च अन्तरक्रियाशीलाः सन्ति (यथा लिङ्क् अथवा रूपनियन्त्रणानि) । यद्यपि मनमाना HTML तत्त्वानि (यथा <span>s) विशेषतां योजयित्वा केन्द्रीकृतानि कर्तुं शक्यन्ते tabindex="0", तथापि एतेन कीबोर्ड-उपयोक्तृणां कृते अ-अन्तर्क्रियाशील-तत्त्वेषु सम्भाव्य-कष्टप्रदं भ्रान्तं च ट्याब्-स्टॉप् योजितं भविष्यति, तथा च अधिकांश-सहायक-प्रौद्योगिकीः सम्प्रति अस्मिन् परिस्थितौ टूल्-टिप्-घोषं न कुर्वन्ति अतिरिक्तरूपेण, केवलं भवतः टूल्टिप् कृते ट्रिगररूपेण न अवलम्बयन्तु hover, यतः एतेन भवतः टूल्टिप्स कीबोर्ड् उपयोक्तृभ्यः ट्रिगर कर्तुं असम्भवं भविष्यति ।

<!-- 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अन्तरक्रियाशीलाः न सन्ति, अर्थात् उपयोक्तारः उपकरणटिप् (अथवा popover) प्रेरयितुं तान् केन्द्रीक्रियितुं, माउस-करणं, क्लिक् कर्तुं वा न शक्नुवन्ति । एकं कार्यपरिहाररूपेण, भवान् एकस्मात् आवरणात् <div>अथवा <span>, आदर्शरूपेण कीबोर्ड-केन्द्रीकरणीयं कृतं , इत्यस्य उपयोगेन टूल्टिप् ट्रिगर कर्तुम् इच्छति tabindex="0"।

html 
<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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ camelCase ” तः “ kebab-case ” इति परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य data-bs-custom-class="beautifier"स्थाने प्रयोगं कुर्वन्तु data-bs-customClass="beautifier"।

Bootstrap 5.2.0 तः, सर्वे घटकाः प्रयोगात्मकं आरक्षितदत्तांशविशेषणं समर्थयन्ति data-bs-configयत् सरलघटकविन्यासं JSON स्ट्रिंग् रूपेण स्थापयितुं शक्नोति । यदा कस्यचित् तत्त्वस्य data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति data-bs-config। तदतिरिक्तं, विद्यमानाः दत्तांशविशेषताः JSON मूल्यानि यथा - स्थापनं कर्तुं समर्थाः सन्ति data-bs-delay='{"show":0,"hide":150}'।

ध्यानं कुर्वन्तु यत् सुरक्षाकारणात् sanitize, sanitizeFn, allowListविकल्पाः च दत्तांशविशेषतानां उपयोगेन आपूर्तिं कर्तुं न शक्यन्ते ।
नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
allowList वस्तु पूर्वनिर्धारितं मूल्यम् वस्तु यस्मिन् अनुमतविशेषताः टैग् च सन्ति ।
animation बूलियन इति true टूल्टिप् मध्ये CSS fade संक्रमणं प्रयोजयन्तु ।
boundary तार, तत्व 'clippingParents' टूल्टिप् इत्यस्य Overflow constraint सीमा (केवलं Popper इत्यस्य preventOverflow modifier इत्यस्य कृते प्रवर्तते) । पूर्वनिर्धारितरूपेण, एतत् 'clippingParents'HTMLElement सन्दर्भं (केवलं JavaScript मार्गेण) स्वीकुर्वितुं शक्नोति च । अधिकविवरणार्थं Popper इत्यस्य detectOverflow docs पश्यन्तु ।
container तार, तत्व, मिथ्या false विशिष्टे तत्त्वे टूल्टिप् योजयति । उदाहरणम् : container: 'body'. एषः विकल्पः विशेषतया उपयोगी अस्ति यत् एतत् भवन्तं ट्रिगरिंग् एलिमेण्ट् इत्यस्य समीपे दस्तावेजस्य प्रवाहे टूल्टिप् स्थापयितुं शक्नोति - यत् विण्डो आकारान्तरणस्य समये टूल्टिप् ट्रिगरिंग् एलिमेण्ट् इत्यस्मात् दूरं प्लवितुं न शक्नोति
customClass स्ट्रिंग्, फंक्शन् '' यदा दर्शितं भवति तदा टूल्टिप् मध्ये क्लास्स् योजयन्तु । ध्यानं कुर्वन्तु यत् एते वर्गाः टेम्पलेट् मध्ये निर्दिष्टानां केषाञ्चन वर्गानां अतिरिक्तं योजिताः भविष्यन्ति । अनेकवर्गान् योजयितुं तान् रिक्तस्थानैः पृथक् कुर्वन्तु: 'class-1 class-2'. भवान् एकं फंक्शन् अपि पारयितुं शक्नोति यत् अतिरिक्तवर्गनामानि समाविष्टं एकं स्ट्रिंग् रिटर्न् कर्तव्यम् ।
delay संख्या, वस्तु 0 टूल्टिप् (ms) दर्शयितुं गोपयितुं च विलम्बः—मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते । यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः अपि विलम्बः प्रयुक्तः भवति । वस्तु संरचना अस्ति : delay: { "show": 500, "hide": 100 }.
fallbackPlacements सरणी ['top', 'right', 'bottom', 'left'] सरणीयां (प्राथमिकताक्रमेण) स्थानानां सूचीं प्रदातुं fallback placements परिभाषयन्तु । अधिकविवरणार्थं Popper's behavior docs पश्यन्तु ।
html बूलियन इति false टूल्टिप् मध्ये HTML इत्यस्य अनुमतिं ददातु । यदि सत्यं भवति तर्हि tooltip's मध्ये HTML टैग्स् टूल्टिप् titleमध्ये रेण्डर् भविष्यति । यदि मिथ्या अस्ति तर्हि innerTextDOM मध्ये सामग्रीं सम्मिलितुं गुणस्य उपयोगः भविष्यति । यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
offset सरणी, स्ट्रिंग, फंक्शन [0, 0] तस्य लक्ष्यस्य सापेक्षं टूलटिप् इत्यस्य ऑफसेट् । अल्पविरामेन पृथक्कृतैः मूल्यैः सह data attributes इत्यत्र भवन्तः एकं स्ट्रिंग् पारयितुं शक्नुवन्ति यथा: data-bs-offset="10,20". यदा offset निर्धारयितुं फंक्शन् उपयुज्यते तदा तस्य प्रथमं तर्करूपेण popper placement, reference, popper rects च समाविष्टेन वस्तुना सह आह्वयते ट्रिगरिंग् एलिमेण्ट् DOM नोड् द्वितीयं आर्गुमेण्ट् रूपेण पारितं भवति । फंक्शन् द्वयोः सङ्ख्यायोः सह सरणीं प्रत्यागन्तुं अर्हति: skidding , distance . अधिकविवरणार्थं Popper's offset docs पश्यन्तु ।
placement स्ट्रिंग्, फंक्शन् 'top' टूलटिप् कथं स्थापयितव्यम् : auto, top, bottom, left, right. यदा autoनिर्दिष्टं भवति तदा तत् गतिशीलरूपेण टूल्टिप् पुनः उन्मुखं करिष्यति । यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं प्रयुक्तः भवति तदा तत् tooltip DOM node इत्यनेन प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM node इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः thistooltip instance इत्यत्र सेट् भवति ।
popperConfig शून्य, वस्तु, कार्य null Bootstrap इत्यस्य पूर्वनिर्धारितं Popper विन्यासं परिवर्तयितुं, Popper इत्यस्य विन्यासं पश्यन्तु । यदा Popper विन्यासस्य निर्माणार्थं फंक्शन् उपयुज्यते तदा तत् एकेन वस्तुना सह आह्वयते यस्मिन् Bootstrap इत्यस्य पूर्वनिर्धारितं Popper विन्यासः भवति । इदं भवन्तं पूर्वनिर्धारितं स्वस्य विन्यासेन सह उपयोक्तुं विलीनीकरणं च कर्तुं साहाय्यं करोति । फंक्शन् इत्यनेन Popper कृते विन्यासवस्तुं प्रत्यागन्तुं भवति ।
sanitize बूलियन इति true सेनेटाइजेशनं सक्षमं निष्क्रियं वा कुर्वन्तु। यदि सक्रियम् 'template'अस्ति , 'content'तथा 'title'विकल्पाः सेनिट् कृताः भविष्यन्ति।
sanitizeFn null, कार्यम् null अत्र भवान् स्वस्य सेनिटाइज् फंक्शन् आपूर्तिं कर्तुं शक्नोति। यदि भवान् स्वच्छीकरणं कर्तुं समर्पितं पुस्तकालयं उपयोक्तुं रोचते तर्हि एतत् उपयोगी भवितुम् अर्हति ।
selector तार, मिथ्या false यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्याणां कृते टूल्टिप् ऑब्जेक्ट्स् प्रत्यायिताः भविष्यन्ति । व्यवहारे, एतस्य उपयोगः गतिशीलरूपेण योजितानां DOM तत्त्वानां ( jQuery.onsupport) कृते उपकरणसूचनानि अपि प्रयोक्तुं भवति । एतत् अंकं सूचनाप्रदं उदाहरणं च पश्यन्तु .
template सूत्र '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' टूलटिप् निर्मायन्ते सति उपयोक्तुं HTML आधारं कुर्वन्तु । tooltip's इत्यस्य titleअन्तः प्रविष्टं भविष्यति .tooltip-inner। .tooltip-arrowटूल्टिप् इत्यस्य बाणः भविष्यति। बाह्यतमस्य आवरणतत्त्वस्य .tooltipवर्गः भवेत् तथा च role="tooltip".
title स्ट्रिंग्, एलिमेण्ट्, फंक्शन् '' titleयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् । यदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तत् तस्य thisreference सेट् कृत्वा तस्मिन् एलिमेण्ट् प्रति आह्वयते यस्मिन् पोपोवरः संलग्नः अस्ति ।
trigger सूत्र 'hover focus' टूलटिप् कथं ट्रिगर भवति: क्लिक्, होवर, फोकस, मैनुअल्। भवान् बहुविधं ट्रिगरं उत्तीर्णं कर्तुं शक्नोति; तान् अन्तरिक्षेण पृथक् कुर्वन्तु। सूचयति यत् , and methods 'manual'इत्यस्य माध्यमेन tooltip प्रोग्रामेटिकरूपेण ट्रिगर भविष्यति ; एतत् मूल्यं अन्येन कस्यचित् ट्रिगरेन सह संयोजितुं न शक्यते । स्वयमेव साधनसूचनाः परिणामिताः भविष्यन्ति ये कीबोर्डद्वारा प्रेरयितुं न शक्यन्ते, तथा च केवलं तदा एव उपयोक्तव्याः यदा कीबोर्ड-उपयोक्तृणां कृते समानसूचनाः प्रसारयितुं वैकल्पिकाः पद्धतयः सन्ति.tooltip('show').tooltip('hide').tooltip('toggle')'hover'

व्यक्तिगतसाधनसूचनानां कृते दत्तांशविशेषताः

व्यक्तिगतसाधनसूचनानां विकल्पाः वैकल्पिकरूपेण दत्तांशगुणानां उपयोगेन निर्दिष्टुं शक्यन्ते, यथा उपरि व्याख्यातम् ।

सह function का प्रयोग करते हुएpopperConfig 

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

विधियाँ

अतुल्यकालिक विधियाँ एवं संक्रमण

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु .

प्रक्रिया वर्णनम्‌
disable तत्त्वस्य टूल्टिप् दर्शयितुं क्षमताम् अपसारयति । टूल्टिप् केवलं पुनः सक्षमीकरणे एव दर्शयितुं समर्थः भविष्यति ।
dispose एकस्य तत्त्वस्य टूल्टिप् गोपयति नष्टं च करोति (DOM एलिमेण्ट् इत्यत्र संगृहीतदत्तांशं निष्कासयति) । प्रत्यायोजनस्य उपयोगं कुर्वन्ति उपकरणटिप्स् (यत् विकल्पस्य उपयोगेन निर्मिताः सन्ति ) selectorवंशज -उद्दीपक-तत्त्वेषु व्यक्तिगतरूपेण नष्टुं न शक्यन्ते ।
enable एकस्य तत्त्वस्य tooltip दर्शयितुं क्षमता ददाति । Tooltips पूर्वनिर्धारितरूपेण सक्षमाः सन्ति ।
getInstance स्थिरविधिः या भवन्तं DOM-तत्त्वेन सह सम्बद्धं टूल्टिप्-दृष्टान्तं प्राप्तुं, अथवा आरम्भं न कृतम् इति सन्दर्भे नूतनं निर्मातुं शक्नोति ।
getOrCreateInstance स्थिरविधिः या भवन्तं DOM-तत्त्वेन सह सम्बद्धं टूल्टिप्-दृष्टान्तं प्राप्तुं, अथवा आरम्भं न कृतम् इति सन्दर्भे नूतनं निर्मातुं शक्नोति ।
hide कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् गोपयति । टूल्टिप् वास्तवतः गोपनीयत्वात् पूर्वं (अर्थात् hidden.bs.tooltipघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । इदं टूलटिप् इत्यस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।
setContent टूल्टिप् इत्यस्य आरम्भीकरणानन्तरं तस्य सामग्रीं परिवर्तयितुं मार्गं ददाति ।
show एकस्य तत्त्वस्य टूल्टिप् प्रकाशयति । टूल्टिप् वास्तवतः दर्शितस्य पूर्वं (अर्थात् shown.bs.tooltipघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । इदं टूलटिप् इत्यस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते । शून्य-दीर्घता-शीर्षक-युक्ताः उपकरण-टिप्स् कदापि न प्रदर्शिताः भवन्ति ।
toggle कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् टॉग्ल् करोति । टूल्टिप् वास्तवतः दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.tooltipor hidden.bs.tooltipइवेण्ट् इत्यस्य भवितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति । इदं टूलटिप् इत्यस्य “मैनुअल्” ट्रिगरिंग् इति मन्यते ।
toggleEnabled तत्त्वस्य टूल्टिप् दर्शयितुं गोपनं वा कर्तुं क्षमताम् टॉग् करोति ।
update कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् इत्यस्य स्थितिं अद्यतनं करोति । 
const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })
The setContent method accepts an object argument, where each property-key is a valid string selector within the popover template, and each related property-value can be string | element | function | null

Events

Event Description
hide.bs.tooltip This event is fired immediately when the hide instance method has been called.
hidden.bs.tooltip This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.tooltip This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM.
show.bs.tooltip This event fires immediately when the show instance method is called.
shown.bs.tooltip This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). 
const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()