टूलटिप्स

स्थानिक शीर्षक संचयनासाठी अॅनिमेशन आणि डेटा-विशेषता साठी 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 मधील घटकामुळे टूलटिप ट्रिगर केल्या जाऊ शकतात.

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

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

पृष्ठावरील सर्व टूलटिप सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या 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>

वापर

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

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

$('#example').tooltip(options)

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

मार्कअप

टूलटिपसाठी आवश्यक मार्कअप ही केवळ एक dataविशेषता आहे आणि titleHTML घटकावर तुम्हाला टूलटिप हवी आहे. टूलटिपचे व्युत्पन्न केलेले मार्कअप अगदी सोपे आहे, जरी त्यास स्थान आवश्यक आहे (डिफॉल्टनुसार, topप्लगइनद्वारे सेट केलेले).

<!-- 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="".

पद्धती

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

कार्यक्रम

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})