Source

टूलटिप्स

स्थानिक शीर्षक संचयनासाठी अॅनिमेशन आणि डेटा-विशेषता साठी CSS3 वापरून CSS आणि JavaScript सह सानुकूल बूटस्ट्रॅप टूलटिप जोडण्यासाठी दस्तऐवजीकरण आणि उदाहरणे.

आढावा

टूलटिप प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:

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

या घटकाचा अॅनिमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा .

ते सर्व मिळाले? छान, काही उदाहरणांसह ते कसे कार्य करतात ते पाहू या.

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

पृष्ठावरील सर्व टूलटिप सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या data-toggleगुणधर्मानुसार निवडणे:

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

उदाहरणे

टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:

घट्ट पँट पुढील स्तरावर केफियेह तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल. फोटो बूथ दाढी कच्ची डेनिम लेटरप्रेस शाकाहारी मेसेंजर बॅग स्टंपटाउन. फार्म-टू-टेबल सीटन, मॅकस्वीनीच्या फिक्सी सस्टेनेबल क्विनोआ 8-बिट अमेरिकन परिधानमध्ये टेरी रिचर्डसन विनाइल चेंब्रे आहे. दाढी स्टंपटाऊन, कार्डिगन्स बन मी लोमो थंडरकॅट्स. टोफू बायोडिझेल विलियम्सबर्ग मार्फा, चार लोको मॅकस्वेनी क्लीन्स व्हेगन चेंब्रे. एक खरोखर उपरोधिक कारागीर काहीही असो कीटार, सीनस्टर फार्म-टू-टेबल बँक्सी ऑस्टिन ट्विटर हँडल फ्रीगन क्रेड रॉ डेनिम सिंगल-ओरिजिन कॉफी व्हायरल.

चार टूलटिप दिशानिर्देश पाहण्यासाठी खालील बटणांवर फिरवा: वर, उजवीकडे, तळाशी आणि डावीकडे.

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

वापर

टूलटिप प्लगइन मागणीनुसार सामग्री आणि मार्कअप तयार करते आणि डीफॉल्टनुसार त्यांच्या ट्रिगर घटकानंतर टूलटिप ठेवते.

JavaScript द्वारे टूलटिप ट्रिगर करा:

$('#example').tooltip(options)
ओव्हरफ्लो autoआणिscroll

overflow: autoजेव्हा मूळ कंटेनरमध्ये आमचे असते किंवा overflow: scrollसारखे असते तेव्हा टूलटिप स्थिती स्वयंचलितपणे बदलण्याचा प्रयत्न करते .table-responsive, परंतु तरीही मूळ प्लेसमेंटची स्थिती ठेवते. निराकरण करण्यासाठी, boundaryडीफॉल्ट मूल्याशिवाय इतर कोणत्याही गोष्टीवर पर्याय सेट करा 'scrollParent', जसे की 'window':

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

मार्कअप

टूलटिपसाठी आवश्यक मार्कअप ही केवळ एक dataविशेषता आहे आणि titleHTML घटकावर तुम्हाला टूलटिप हवी आहे. टूलटिपचे व्युत्पन्न केलेले मार्कअप अगदी सोपे आहे, जरी त्यास स्थान आवश्यक आहे (डिफॉल्टनुसार, 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परस्परसंवादी नसतात, म्हणजे वापरकर्ते टूलटिप (किंवा पॉपओव्हर) ट्रिगर करण्यासाठी फोकस करू शकत नाहीत, फिरवू शकत नाहीत किंवा त्यावर क्लिक करू शकत नाहीत. एक उपाय म्हणून, तुम्हाला रॅपरवरून टूलटिप ट्रिगर करायची आहे <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>

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

लक्षात ठेवा की सुरक्षेच्या कारणास्तव डेटा विशेषता वापरून sanitize, sanitizeFnआणि whiteListपर्याय पुरवले जाऊ शकत नाहीत.

नाव प्रकार डीफॉल्ट वर्णन
अॅनिमेशन बुलियन खरे टूलटिपवर CSS फेड संक्रमण लागू करा
कंटेनर स्ट्रिंग | घटक | खोटे खोटे

विशिष्ट घटकास टूलटिप जोडते. उदाहरण: container: 'body'. हा पर्याय विशेषतः उपयुक्त आहे कारण तो तुम्हाला दस्तऐवजाच्या प्रवाहात ट्रिगरिंग घटकाजवळ टूलटिप ठेवण्याची परवानगी देतो - जे विंडो रिसाइज दरम्यान टूलटिपला ट्रिगरिंग घटकापासून दूर जाण्यापासून प्रतिबंधित करेल.
विलंब संख्या | वस्तू 0

टूलटिप (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही

जर नंबर दिला गेला असेल तर, लपवा/शो दोन्हीसाठी विलंब लागू केला जातो

ऑब्जेक्ट रचना आहे:delay: { "show": 500, "hide": 100 }
html बुलियन खोटे

टूलटिपमध्ये HTML ला अनुमती द्या.

खरे असल्यास, टूलटिपमधील HTML टॅग टूलटिपमध्ये titleप्रस्तुत केले जातील. असत्य असल्यास, textDOM मध्ये सामग्री घालण्यासाठी jQuery ची पद्धत वापरली जाईल.

तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा.
प्लेसमेंट स्ट्रिंग | कार्य 'शीर्ष'

टूलटिप कसे ठेवावे - ऑटो | शीर्ष | तळाशी | डावीकडे | बरोबर
जेव्हा autoनिर्दिष्ट केले जाते, तेव्हा ते डायनॅमिकपणे टूलटिपला पुनर्स्थित करेल.

जेव्हा एखादे फंक्शन स्थान निश्चित करण्यासाठी वापरले जाते, तेव्हा त्याला टूलटिप DOM नोडला त्याचा पहिला युक्तिवाद म्हणून आणि ट्रिगरिंग घटक DOM नोडला दुसरा म्हणून म्हटले जाते. thisसंदर्भ टूलटिप उदाहरणावर सेट केला आहे .
निवडकर्ता स्ट्रिंग | खोटे खोटे निवडक प्रदान केल्यास, टूलटिप ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केले जातील. व्यवहारात, डायनॅमिकली जोडलेल्या DOM घटकांवर टूलटिप लागू करण्यासाठी देखील याचा वापर केला जातो ( jQuery.onसमर्थन). हे आणि एक माहितीपूर्ण उदाहरण पहा .
टेम्पलेट स्ट्रिंग '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

टूलटिप तयार करताना वापरण्यासाठी बेस HTML.

टूलटिप titleमध्ये इंजेक्ट केली जाईल .tooltip-inner.

.arrowटूलटिपचा बाण होईल.

सर्वात बाहेरील रॅपर घटकामध्ये .tooltipवर्ग आणि role="tooltip".
शीर्षक स्ट्रिंग | घटक | कार्य ''

titleविशेषता उपस्थित नसल्यास डीफॉल्ट शीर्षक मूल्य .

एखादे फंक्शन दिले असल्यास, ते thisटूलटिप संलग्न केलेल्या घटकास त्याच्या संदर्भासह कॉल केले जाईल.
ट्रिगर स्ट्रिंग 'फोकस फिरवा'

टूलटिप कशी ट्रिगर केली जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल तुम्ही एकाधिक ट्रिगर्स पास करू शकता; त्यांना एका जागेसह वेगळे करा.

'manual'.tooltip('show')सूचित करते की टूलटिप , .tooltip('hide')आणि .tooltip('toggle')पद्धतींद्वारे प्रोग्रामेटिकरित्या ट्रिगर केली जाईल ; हे मूल्य इतर कोणत्याही ट्रिगरसह एकत्र केले जाऊ शकत नाही.

'hover'कीबोर्डद्वारे ट्रिगर करता येणार नाही अशा टूलटिप्सचा परिणाम स्वतःच होईल आणि कीबोर्ड वापरकर्त्यांसाठी समान माहिती पोहोचवण्याच्या पर्यायी पद्धती असतील तरच वापरल्या जाव्यात.
ऑफसेट संख्या | स्ट्रिंग | कार्य 0

त्याच्या लक्ष्याशी संबंधित टूलटिपचा ऑफसेट.

जेव्हा ऑफसेट निर्धारित करण्यासाठी फंक्शन वापरले जाते, तेव्हा ते प्रथम युक्तिवाद म्हणून ऑफसेट डेटा असलेल्या ऑब्जेक्टसह कॉल केले जाते. फंक्शनने समान संरचनेसह ऑब्जेक्ट परत करणे आवश्यक आहे. ट्रिगरिंग घटक DOM नोड दुसरा युक्तिवाद म्हणून पास केला जातो.

अधिक माहितीसाठी Popper.js च्या ऑफसेट डॉक्स पहा .
फॉलबॅक प्लेसमेंट स्ट्रिंग | रचना 'फ्लिप' फॉलबॅकवर पॉपर कोणते स्थान वापरेल हे निर्दिष्ट करण्यास अनुमती द्या. अधिक माहितीसाठी Popper.js च्या वर्तन डॉक्सचा संदर्भ घ्या
सीमा स्ट्रिंग | घटक 'स्क्रोल पालक' टूलटिपची ओव्हरफ्लो मर्यादा सीमा. 'viewport', 'window', 'scrollParent', किंवा HTMLElement संदर्भ (केवळ JavaScript) ची मूल्ये स्वीकारते . अधिक माहितीसाठी Popper.js च्या preventOverflow डॉक्स पहा .
निर्जंतुकीकरण बुलियन खरे स्वच्छता सक्षम किंवा अक्षम करा. सक्रिय केल्यास 'template'आणि 'title'पर्याय निर्जंतुक केले जातील.
श्वेतसूची वस्तू डीफॉल्ट मूल्य ऑब्जेक्ट ज्यामध्ये अनुमत विशेषता आणि टॅग आहेत
sanitizeFn शून्य | कार्य निरर्थक येथे तुम्ही तुमचे स्वतःचे सॅनिटाइज फंक्शन देऊ शकता. तुम्ही सॅनिटायझेशन करण्यासाठी समर्पित लायब्ररी वापरण्यास प्राधान्य दिल्यास हे उपयुक्त ठरू शकते.
popperConfig शून्य | वस्तू निरर्थक बूटस्ट्रॅपचे डीफॉल्ट Popper.js कॉन्फिगरेशन बदलण्यासाठी, Popper.js चे कॉन्फिगरेशन पहा

वैयक्तिक टूलटिपसाठी डेटा विशेषता

वर सांगितल्याप्रमाणे वैयक्तिक टूलटिपसाठी पर्याय डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.

पद्धती

असिंक्रोनस पद्धती आणि संक्रमणे

सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .

अधिक माहितीसाठी आमचे JavaScript दस्तऐवजीकरण पहा .

$().tooltip(options)

घटक संकलनासाठी टूलटिप हँडलर संलग्न करते.

.tooltip('show')

घटकाची टूलटिप प्रकट करते. टूलटिप प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.tooltipइव्हेंट होण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते. शून्य-लांबीच्या शीर्षकांसह टूलटिप्स कधीही प्रदर्शित केल्या जात नाहीत.

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

.tooltip('hide')

घटकाची टूलटिप लपवते. टूलटिप प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येते (म्हणजे hidden.bs.tooltipघटना घडण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

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

.tooltip('toggle')

घटकाची टूलटिप टॉगल करते. टूलटिप प्रत्यक्षात दाखविण्याआधी किंवा लपविण्याआधी कॉलरकडे परत येते (म्हणजे shown.bs.tooltipकिंवा hidden.bs.tooltipघटना घडण्यापूर्वी). हे टूलटिपचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

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

.tooltip('dispose')

घटकाची टूलटिप लपवते आणि नष्ट करते. डेलिगेशन वापरणाऱ्या टूलटिप्स (ज्या पर्याय वापरून तयार केल्या जातात ) selectorवंशज ट्रिगर घटकांवर वैयक्तिकरित्या नष्ट केल्या जाऊ शकत नाहीत.

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

.tooltip('enable')

घटकाची टूलटिप दाखवण्याची क्षमता देते. टूलटिप डीफॉल्टनुसार सक्षम आहेत.

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

.tooltip('disable')

घटकाची टूलटिप दाखवण्याची क्षमता काढून टाकते. टूलटिप पुन्हा-सक्षम केल्यावरच ती दाखवता येईल.

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

.tooltip('toggleEnabled')

घटकाची टूलटिप दाखवण्याची किंवा लपवण्याची क्षमता टॉगल करते.

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

.tooltip('update')

घटकाच्या टूलटिपची स्थिती अपडेट करते.

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

कार्यक्रम

कार्यक्रमाचा प्रकार वर्णन
show.bs.tooltip showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
दाखवले.bs.टूलटिप जेव्हा टूलटिप वापरकर्त्यासाठी दृश्यमान केली जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hide.bs.tooltip hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
hidden.bs.tooltip जेव्हा टूलटिप वापरकर्त्यापासून लपवून ठेवली जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
inserted.bs.tooltip show.bs.tooltipजेव्हा टूलटिप टेम्प्लेट DOM मध्ये जोडले जाते तेव्हा हा इव्हेंट इव्हेंटनंतर काढला जातो . 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})