Source

टूलटिप्स

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

अवलोकनम्

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

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

अस्य घटकस्य एनिमेशन प्रभावः prefers-reduced-motionमीडिया प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

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

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

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

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

उदाहरणानि

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

टाइट पैंट अग्रिम स्तर keffiyeh भवन्तः सम्भवतः तेषां विषये न श्रुतवन्तः। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग stumptown. खेत-से-मेज seitan, mcsweeney के fixie टिकाऊ quinoa 8-बिट अमेरिकी परिधान एक टेरी richardson vinyl chambray है। दाढ़ी स्टम्पटाउन, कार्डिगन बान्ह मि लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray. एक वास्तव में विडंबना कारीगर जो भी keytar , scenester खेत-से-मेज banksy ऑस्टिन twitter संभाल freegan cred कच्चे डेनिम एकल-मूल कॉफी वायरल.

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

<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यदि विशेषता नास्ति तर्हि पूर्वनिर्धारितं शीर्षकमूल्यम् ।

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

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

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

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

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

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

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

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

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

विधियाँ

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

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

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

$().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...
})