in English

टूलटिप्स

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

अवलोकनम्

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

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

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

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

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

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

उदाहरणानि

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

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

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

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

तथा कस्टम HTML योजित के साथ:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

प्रयोगः

टूल्टिप् प्लगिन् आग्रहेण सामग्रीं मार्कअपं च जनयति, पूर्वनिर्धारितरूपेण च तेषां ट्रिगर एलिमेण्ट् इत्यस्य अनन्तरं टूल्टिप् स्थापयति ।

जावास्क्रिप्ट् मार्गेण टूलटिप् ट्रिगरं कुर्वन्तु:

$('#example').tooltip(options)
अतिप्रवाहः autoचscroll

Tooltip स्थितिः स्वयमेव परिवर्तयितुं प्रयतते यदा मातापितृपात्रस्य अस्माकं भवति overflow: autoवा overflow: scrollइव .table-responsive, परन्तु तदपि मूलस्थापनस्य स्थितिं धारयति । समाधानार्थं, boundaryविकल्पं पूर्वनिर्धारितमूल्यात् परं किमपि सेट् कुर्वन्तु, 'scrollParent', यथा 'window':

$('#example').tooltip({ boundary: 'window' })

मार्कअप

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

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

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

<!-- HTML to write -->
<a href="#" data-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="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

अक्षम तत्व

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

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""।

ध्यानं कुर्वन्तु यत् सुरक्षाकारणात् sanitize, sanitizeFnतथा whiteListविकल्पाः दत्तांशविशेषतानां उपयोगेन आपूर्तिं कर्तुं न शक्यन्ते ।
नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
एनिमेशन बूलियन इति सत्यम्‌ टूल्टिप् मध्ये CSS fade संक्रमणं प्रयोजयन्तु
पात्रम् तार | तत्व | असत्य असत्य

विशिष्टे तत्त्वे टूल्टिप् योजयति । उदाहरणम् : container: 'body'. एषः विकल्पः विशेषतया उपयोगी अस्ति यत् एतत् भवन्तं ट्रिगरिंग् एलिमेण्ट् इत्यस्य समीपे दस्तावेजस्य प्रवाहे टूल्टिप् स्थापयितुं शक्नोति - यत् विण्डो आकारान्तरणस्य समये टूल्टिप् ट्रिगरिंग् एलिमेण्ट् इत्यस्मात् दूरं प्लवितुं न शक्नोति
विलम्बः संख्या | वस्तु ०

टूल्टिप् (ms) दर्शयितुं गोपयितुं च विलम्बः - मैनुअल् ट्रिगर प्रकारस्य कृते न प्रवर्तते

यदि सङ्ख्या प्रदत्ता भवति तर्हि hide/show इति द्वयोः कृते विलम्बः प्रयुक्तः भवति

वस्तुसंरचना अस्ति : १.delay: { "show": 500, "hide": 100 }
html बूलियन इति असत्य

टूल्टिप् मध्ये HTML इत्यस्य अनुमतिं ददातु ।

यदि सत्यं भवति तर्हि tooltip's मध्ये HTML टैग्स् टूल्टिप् titleमध्ये रेण्डर् भविष्यति । यदि मिथ्या अस्ति तर्हि DOM मध्ये सामग्रीं सम्मिलितुं jQuery इत्यस्य textविधिः उपयुज्यते ।

यदि भवान् XSS आक्रमणानां विषये चिन्तितः अस्ति तर्हि पाठस्य उपयोगं कुर्वन्तु।
स्थापनम् तार | नियोग 'उपरितन'

टूलटिप् कथं स्थापयितव्यम् - auto | शीर्ष | तले | वाम | दक्षिणः।
यदा autoनिर्दिष्टं भवति तदा तत् गतिशीलरूपेण टूल्टिप् पुनः उन्मुखं करिष्यति ।

यदा कश्चन फंक्शन् प्लेसमेण्ट् निर्धारयितुं प्रयुक्तः भवति तदा तत् tooltip DOM node इत्यनेन प्रथमं आर्गुमेण्ट् रूपेण, ट्रिगरिंग एलिमेण्ट् DOM node इत्यनेन च द्वितीयं कृत्वा आह्वयते । सन्दर्भः thistooltip instance इत्यत्र सेट् भवति ।
चयनकर्ता तार | असत्य असत्य यदि चयनकर्ता प्रदत्तः अस्ति तर्हि निर्दिष्टलक्ष्याणां कृते टूल्टिप् ऑब्जेक्ट्स् प्रत्यायिताः भविष्यन्ति । व्यवहारे, एतस्य उपयोगः गतिशीलरूपेण योजितानां DOM तत्त्वानां ( jQuery.onsupport) कृते उपकरणसूचनानि अपि प्रयोक्तुं भवति । एतत् एकं च सूचनाप्रदं उदाहरणं पश्यन्तु .
टेम्पलेट सूत्र '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप् निर्मायन्ते सति उपयोक्तुं HTML आधारं कुर्वन्तु ।

tooltip's इत्यस्य titleअन्तः प्रविष्टं भविष्यति .tooltip-inner।

.arrowटूल्टिप् इत्यस्य बाणः भविष्यति।

बाह्यतमस्य आवरणतत्त्वस्य .tooltipवर्गः भवेत् तथा च role="tooltip".
शीर्षक तार | तत्व | नियोग '' इति ।

titleयदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् ।

thisयदि कश्चन फंक्शन् दत्तः अस्ति तर्हि तस्य reference set इत्यनेन सह तस्य एलिमेण्ट् इत्यस्य आह्वानं भविष्यति यस्मिन् टूल्टिप् संलग्नम् अस्ति ।
प्रवर्त्यम् सूत्र 'होवर फोकस' इति ।

टूलटिप् कथं ट्रिगर भवति - | भ्रमति | फोकस | शास्त्र। भवान् बहुविधं ट्रिगरं उत्तीर्णं कर्तुं शक्नोति; तान् अन्तरिक्षेण पृथक् कुर्वन्तु।

'manual'.tooltip('show')सूचयति यत् , .tooltip('hide')and .tooltip('toggle')methods इत्यस्य माध्यमेन tooltip प्रोग्रामेटिकरूपेण ट्रिगर भविष्यति ; एतत् मूल्यं अन्येन कस्यचित् ट्रिगरेन सह संयोजितुं न शक्यते ।

'hover'स्वयमेव उपकरणसूचनानि परिणामयिष्यन्ति ये कीबोर्डद्वारा प्रेरयितुं न शक्यन्ते, तथा च केवलं तदा एव उपयोक्तव्याः यदा कीबोर्ड-उपयोक्तृणां कृते समानसूचनाः प्रसारयितुं वैकल्पिकाः पद्धतयः सन्ति
offset इति संख्या | तार | नियोग ०

तस्य लक्ष्यस्य सापेक्षं टूलटिप् इत्यस्य ऑफसेट् ।

यदा कस्मिंश्चित् फंक्शन् इत्यस्य उपयोगः ऑफसेट् निर्धारयितुं भवति तदा तस्य प्रथमं आर्गुमेण्ट् रूपेण offset data युक्तेन ऑब्जेक्ट् इत्यनेन सह आह्वयते । फंक्शन् इत्यनेन समानसंरचनायुक्तं वस्तु प्रेषितव्यम् । ट्रिगरिंग् एलिमेण्ट् DOM नोड् द्वितीयं आर्गुमेण्ट् रूपेण पारितं भवति ।

अधिकविवरणार्थं Popper's offset docs पश्यन्तु ।
fallbackस्थापनम् तार | सरणी 'पर्यस्' Fallback इत्यत्र Popper इत्यस्य उपयोगः कस्य स्थानस्य उपयोगं करिष्यति इति निर्दिष्टुं अनुमन्यताम् । अधिकविवरणार्थं Popper's behavior docs पश्यन्तु
customClass इति तार | नियोग '' इति ।

यदा दर्शितं भवति तदा टूल्टिप् मध्ये क्लास्स् योजयन्तु । ध्यानं कुर्वन्तु यत् एते वर्गाः टेम्पलेट् मध्ये निर्दिष्टानां केषाञ्चन वर्गानां अतिरिक्तं योजिताः भविष्यन्ति । अनेकवर्गान् योजयितुं तान् रिक्तस्थानैः पृथक् कुर्वन्तु: 'a b'.

भवान् एकं फंक्शन् अपि पारयितुं शक्नोति यत् अतिरिक्तवर्गनामानि समाविष्टं एकं स्ट्रिंग् रिटर्न् कर्तव्यम् ।
सीमा तार | तत्व 'scrollParent' इति । टूलटिप् इत्यस्य ओवरफ्लो बाध्यता सीमा । 'viewport', 'window', 'scrollParent', अथवा HTMLElement सन्दर्भस्य मूल्यानि स्वीकुर्वति (केवलं JavaScript) । अधिकविवरणार्थं Popper इत्यस्य preventOverflow docs पश्यन्तु ।
सेनेटाइज करें बूलियन इति सत्यम्‌ सेनेटाइजेशनं सक्षमं निष्क्रियं वा कुर्वन्तु। यदि सक्रिय 'template'एवं 'title'विकल्पों को सेनेटाइज किया जाएगा। अस्माकं JavaScript documentation मध्ये sanitizer विभागं पश्यन्तु .
whiteList इति वस्तु पूर्वनिर्धारितं मूल्यम् वस्तु यस्मिन् अनुमतविशेषताः टैग् च सन्ति
सेनिटाइजFn शून्य | नियोग लुप्तमूल्य अत्र भवान् स्वस्य सेनिटाइज् फंक्शन् आपूर्तिं कर्तुं शक्नोति। यदि भवान् स्वच्छीकरणं कर्तुं समर्पितं पुस्तकालयं उपयोक्तुं रोचते तर्हि एतत् उपयोगी भवितुम् अर्हति ।
popperConfig इति शून्य | वस्तु लुप्तमूल्य Bootstrap इत्यस्य पूर्वनिर्धारितं Popper config परिवर्तयितुं, Popper इत्यस्य विन्यासं पश्यन्तु

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

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

विधियाँ

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

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

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

$().tooltip(options)

एलिमेण्ट्-सङ्ग्रहे टूल्टिप्-हन्डलर् संलग्नं करोति ।

.tooltip('show')

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

$('#element').tooltip('show')

.tooltip('hide')

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

$('#element').tooltip('hide')

.tooltip('toggle')

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

$('#element').tooltip('toggle')

.tooltip('dispose')

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

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

घटनाः

घटना प्रकार वर्णनम्‌
show.bs.tooltip इति दर्शयतु एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
दर्शितम्.bs.tooltip यदा उपकरणटिप् उपयोक्त्रे दृश्यमानं कृतम् अस्ति तदा एषा घटना प्रज्वलिता भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
hide.bs.tooltip इति इदं घटना तत्क्षणमेव प्रज्वलितं भवति यदा उदाहरणविधिः hideआहूता अस्ति ।
hidden.bs.tooltip इति यदा उपकरणटिप् उपयोक्त्रेण गोपनीयं समाप्तं भवति तदा एषा घटना प्रज्वलिता भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
सम्मिलितम्.bs.tooltip show.bs.tooltipयदा DOM मध्ये tooltip template योजितं भवति तदा घटनायाः अनन्तरं एषा घटना निष्कासिता भवति । 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})