twitter-bootstrap
टूलटिप
खोज…
टिप्पणियों
टूलटिप एक उपयोगकर्ता इंटरफ़ेस तत्व है जो एक छोटे पॉप-अप बॉक्स की तरह दिखता है। यह आमतौर पर ट्रिगर होता है जब कोई उपयोगकर्ता अपने पॉइंटर को किसी अन्य तत्व पर क्लिक करता है, बिना उसे क्लिक किए।
प्रदर्शन कारणों से, टूलटिप्स को jQuery के साथ आरंभीकृत किया जाना चाहिए। निम्न कोड DOM में सभी टूलटिप्स को सक्षम करेगा:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
पोजिशनिंग टूलटिप्स
डिफ़ॉल्ट रूप से, टूलटिप तत्व के शीर्ष पर दिखाई देगा। हम टूलटिप की स्थिति को शीर्ष, नीचे, बाएं या तत्व के दाईं ओर सेट करने के लिए data-placement विशेषता का उपयोग कर सकते हैं।
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
टूलटिप को गतिशील रूप से पुन: बनाने के लिए हम data-placement="auto" का भी उपयोग कर सकते हैं। अगले उदाहरण में टूलटिप संभव होने पर टूलटिप को बाईं ओर प्रदर्शित करेगा, अन्यथा यह सही प्रदर्शित करेगा।
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
मूल उदाहरण
टूलटिप बनाने के लिए, हमें केवल data-toggle="tooltip" विशेषता और HTML तत्व में एक title जोड़ना होगा, जिसमें टूलटिप होगा। शीर्षक विशेषता का उपयोग टूलटिप के अंदर प्रदर्शित पाठ को निर्दिष्ट करने के लिए किया जाता है।
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
