बूस्ट्रैप 5 टूल्टिप
टूलटिप
टूलटिप कंपोजंट एक छोटा बगैर के बाहरी दृश्य बॉक्स है, जो उपयोगकर्ता जब अपना माउस पॉइंटर एलिमेंट पर ले जाएगा तो दिखाई देता है:
कैसे टूलटिप बनाया जाता है
यदि आप टूलटिप बनाना चाहते हैं तो data-bs-toggle="tooltip" गुण विशेषण एलिमेंट में जोड़ा जाता है。
कृपया इसे उपयोग करें title गुण विशेषण निर्दिष्ट करता है कि टूलटिप में क्या लिखा जाएगा:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="बहुत अच्छा!">कृपया मेरे ऊपर से होटिंग करें!</button>
टिप्पणी:टूलटिप को काम करने के लिए जेसक्रिप्ट में आरंभ करना आवश्यक है।
नीचे दिए गए कोड सभी टूलटिप को सक्षम करेगा:
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
टूलटिप स्थानांतरण
डिफ़ॉल्ट में, टूलटिप एलिमेंट के ऊपर दिखाया जाएगा。
कृपया इसे उपयोग करें data-bs-placement एलिमेंट के ऊपर, नीचे, बाईं ओर या दाईं ओर के स्थान पर टूलटिप की गुणसूत्र रखें:
उदाहरण
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="बहुत अच्छा!">हूवर</a> <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="बहुत अच्छा!">हूवर</a> <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="बहुत अच्छा!">हूवर</a> <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="बहुत अच्छा!">हूवर</a>
