यह आलेख सादे जावास्क्रिप्ट का उपयोग करके टूलटिप प्रदर्शित करेगा।
एक सादा जावास्क्रिप्ट टूलटिप कैसे बनाएँ?
JavaScript का उपयोग करके टूलटिप बनाने के लिए, “का उपयोग करें माउस के ऊपर ' और ' माउसआउट ' आयोजन। बेहतर समझ के लिए नीचे दिए गए उदाहरणों का पालन करें।
उदाहरण 1: जावास्क्रिप्ट का उपयोग करके टूलटिप
दिए गए उदाहरण में, हम शुद्ध जावास्क्रिप्ट में एक टूलटिप बनाएंगे और “” का उपयोग करके टूलटिप को स्टाइल भी करेंगे। शैली ' गुण।
सबसे पहले, एक टेक्स्ट बनाएं जहां हम माउसओवर इवेंट पर टूलटिप दिखाना चाहते हैं:
< h5 आईडी = 'मूलपाठ' > लिनक्स h5 >
वह पाठ प्राप्त करें जहां टूलटिप ' का उपयोग करके दिखाई देगा getElementById () ' तरीका:
जहां एलएच = दस्तावेज़। getElementById ( 'मूलपाठ' ) ;
अब, कॉल करें ' ऐडइवेंट लिस्टनर () 'पास करके विधि' माउस के ऊपर ” घटना और एक समारोह () एक पैरामीटर के रूप में। परिभाषित फ़ंक्शन में, पहले, हम एक '' बनाकर एक टूलटिप बनाएंगे। डिव ” तत्व, पाठ सेट करें जो होवर पर दिखाया जाएगा, और टूलटिप के कुछ स्टाइल को “ का उपयोग करके सेट करें शैली ' गुण। अंत में, 'का उपयोग करके टूलटिप जोड़ें' अपेंड चाइल्ड() ' तरीका:
एलएच। addEventListener ( 'माउस के ऊपर' , समारोह ( ) {टूलटिप था = दस्तावेज़। createElement ( 'डिव' ) ;
टूलटिप। innerHTML = 'कौशल सीखने के लिए एक बेहतरीन वेबसाइट' ;
टूलटिप। शैली . दृश्यता = 'दृश्यमान' ;
टूलटिप। शैली . पद = 'शुद्ध' ;
टूलटिप। शैली . पृष्ठभूमि का रंग = 'आरजीबी (107, 101, 101)' ;
टूलटिप। शैली . गद्दी = '5 पीएक्स' ;
टूलटिप। शैली . BorderRadius = '3 पीएक्स' ;
टूलटिप। शैली . रंग = 'सफ़ेद' ;
टूलटिप। शैली . बाएं = 'पचास%' ;
टूलटिप। शैली . चौड़ाई = '200 पीएक्स' ;
दस्तावेज़। शरीर . अपेंड चाइल्ड ( टूलटिप ) ;
} ) ;
यहाँ, 'का उपयोग करें माउसआउट ” घटना जो टूलटिप को हटा देगी जबकि कर्सर पाठ से दूर हो जाएगा:
एलएच। addEventListener ( 'माउस आउट' , समारोह ( ) {
दस्तावेज़। शरीर . हटाएं बच्चे ( टूलटिप ) ;
} ) ;
उत्पादन
उदाहरण 2: CSS के साथ JavaScript का उपयोग करके टूलटिप
आप CSS के साथ JavaScript में टूलटिप भी बना सकते हैं।
ऐसा करने के लिए, टैग का उपयोग करके टूलटिप का टेक्स्ट दिखाने के लिए एक क्षेत्र बनाएं और एक आईडी निर्दिष्ट करें ' #myTooltip ':
< स्पैन आईडी = 'माईटूलटिप' >> अवधि >'का उपयोग करके टेक्स्ट और टूलटिप के संदर्भ प्राप्त करें' getElementById () ' तरीका:
जहां एलएच = दस्तावेज़। getElementById ( 'मूलपाठ' ) ;टूलटिप था = दस्तावेज़। getElementById ( 'माईटूलटिप' ) ;
टूलटिप को 'पर कॉल करें माउस के ऊपर 'का उपयोग करके फ़ंक्शन में टेक्स्ट सेट करके ईवेंट' innerHTML ' संपत्ति:
एलएच। addEventListener ( 'माउस के ऊपर' , समारोह ( ) {टूलटिप। शैली . दृश्यता = 'दृश्यमान' ;
टूलटिप। innerHTML = 'कौशल सीखने के लिए एक बेहतरीन वेबसाइट' ;
} ) ;
टूलटिप को 'पर छुपाएं' माउसआउट '' सेट करके घटना दृश्यता 'को संपत्ति' छिपा हुआ ':
एलएच। addEventListener ( 'माउस आउट' , समारोह ( ) {टूलटिप। शैली . दृश्यता = 'छिपा हुआ' ;
} ) ;
एक आईडी बनाएं ' #myTooltip ” स्टाइल शीट में जो टूलटिप को स्टाइल करेगा:
#myTooltip {दृश्यता : छिपा हुआ ;
चौड़ाई : 200 पीएक्स ;
साथ - अनुक्रमणिका : 1 ;
पृष्ठभूमि - रंग : rgb ( 107 , 101 , 101 ) ;
मूलपाठ - संरेखित : केंद्र ;
रंग : सफ़ेद ;
गद्दी : 5 पीएक्स 0 ;
सीमा - RADIUS : 3 पीएक्स ;
बाएं : पचास %;
}
जैसा कि आप देख सकते हैं कि टूलटिप को टेक्स्ट पर सफलतापूर्वक लागू कर दिया गया है:
HTML और CSS का उपयोग करके टूलटिप कैसे बनाएं?
आप जावास्क्रिप्ट के बिना भी टूलटिप बना सकते हैं। HTML फ़ाइल में, टेक्स्ट बनाएँ “ लिनक्स ”, जहां पर मँडराते समय टूलटिप दिखाई जाएगी। हेडिंग/टेक्स्ट
टैग के अंदर टूलटिप के लिए टेक्स्ट सेट करने के लिए एलिमेंट बनाएं:
< h5 कक्षा = 'टूलटिप' >
लिनक्स
< अवधि कक्षा = 'टूलटिपटेक्स्ट' >
हुनर सीखने का मंच
अवधि >
h5 >
स्टाइल शीट में, एक क्लास या एक आईडी बनाएं जो HTML तत्वों को असाइन की जाएगी। यहां, हम एक वर्ग बनाएंगे ' टूलटिप ' जो शीर्षक को सौंपा गया है:
. टूलटिप {
पद : रिश्तेदार ;
दिखाना : इन - लाइन - अवरोध पैदा करना ;
}
एक वर्ग परिभाषित करें ' tooltiptext “टूलटिप के टेक्स्ट को स्टाइल करने के लिए और उसे HTML असाइन करने के लिए” <विस्तार> ' उपनाम:
. tooltiptext {
दृश्यता : छिपा हुआ ;
चौड़ाई : 150 पीएक्स ;
पृष्ठभूमि - रंग : rgb ( 107 , 101 , 101 ) ;
रंग : #फफ्फ ;
मूलपाठ - संरेखित : केंद्र ;
गद्दी : 5 पीएक्स 0 ;
सीमा - RADIUS : 3 पीएक्स ;
पद : शुद्ध ;
साथ - अनुक्रमणिका : 1 ;
तल : 125 %;
बाएं : पचास %;
अंतर - बाएं : - 60 पीएक्स ;
अस्पष्टता : 0 ;
संक्रमण : अपारदर्शिता 0.3s ;
}
तय करना ' मंडराना 'के साथ प्रभाव' टूलटिप हॉवर इफेक्ट पर टूलटिप दिखाने के लिए क्लास:
. टूलटिप : हॉवर। tooltiptext {
दृश्यता : दृश्यमान ;
अस्पष्टता : 1 ;
}
उत्पादन
हमने सामान्य जावास्क्रिप्ट टूलटिप से संबंधित सभी आवश्यक निर्देशों को संकलित किया है।
निष्कर्ष
JavaScript का उपयोग करके टूलटिप बनाने के लिए, “का उपयोग करें माउस के ऊपर ' और ' माउसआउट ” घटनाएँ, जो तत्व पर हॉवर पर टूलटिप दिखाती हैं और जब माउसआउट घटना ट्रिगर होती है तो इसे छुपा देती है। टूलटिप को स्टाइल करने के लिए, 'का उपयोग करें' शैली 'जावास्क्रिप्ट में विशेषता। इस लेख में, हमने सादे जावास्क्रिप्ट, सीएसएस के साथ जावास्क्रिप्ट, और जावास्क्रिप्ट के बिना टूलटिप का उपयोग करके टूलटिप बनाने के सर्वोत्तम संभव उदाहरण प्रदर्शित किए।