बूटस्ट्रैप टूलटिप प्लगइन
टूलटिप प्लगइन
टूलटिप प्लगइन छोटा पॉप-अप बॉक्स है जो तब प्रकट होता है जब उपयोगकर्ता माउस पॉइंटर को किसी तत्व पर ले जाता है:
युक्ति: प्लगइन्स को व्यक्तिगत रूप से शामिल किया जा सकता है (बूटस्ट्रैप की व्यक्तिगत "टूलटिप.जेएस" फ़ाइल का उपयोग करके), या सभी को एक साथ ("bootstrap.js" या "bootstrap.min.js" का उपयोग करके) शामिल किया जा सकता है।
टूलटिप कैसे बनाएं
टूलटिप बनाने के लिए, data-toggle="tooltip"
किसी तत्व में विशेषता जोड़ें।
titleटूलटिप के अंदर प्रदर्शित होने वाले टेक्स्ट को निर्दिष्ट करने के लिए विशेषता का उपयोग करें :
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
नोट: टूलटिप्स को jQuery के साथ प्रारंभ किया जाना चाहिए: निर्दिष्ट तत्व का चयन करें और tooltip()विधि को कॉल करें।
निम्नलिखित कोड दस्तावेज़ में सभी टूलटिप्स को सक्षम करेगा:
उदाहरण
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
पोजिशनिंग टूलटिप्स
डिफ़ॉल्ट रूप से, टूलटिप तत्व के शीर्ष पर दिखाई देगा।
data-placementतत्व के ऊपर, नीचे, बाएँ या दाएँ पक्ष पर टूलटिप की स्थिति निर्धारित करने के लिए विशेषता का उपयोग करें :
उदाहरण
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
युक्ति:data-placement आप " " के मान के साथ विशेषता का भी उपयोग कर सकते हैं auto, जो ब्राउज़र को टूलटिप की स्थिति तय करने देगा। उदाहरण के लिए, यदि मान " auto left" है, तो टूलटिप संभव होने पर बाईं ओर प्रदर्शित होगा, अन्यथा दाईं ओर।
पूरा बूटस्ट्रैप टूलटिप संदर्भ
सभी टूलटिप विकल्पों, विधियों और घटनाओं के संपूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप JS टूलटिप संदर्भ पर जाएँ ।