Using w3-tooltip for interactive UI elements in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में w3-tooltip क्लास वेब डेवलपर को किसी वेबपेज वेबसाइट वेब एलिमेंट्स में टूलटिप्स फीचर्स को ऐड या डिस्प्ले करने में हेल्प करता है, जब कोई इंटरनेट यूज़र किसी वेबपेज एलिमेंट पर माउस पॉइंटर को मूव करता है, या उस एलिमेंट ऑब्जेक्ट को डायरेक्ट इंटरैक्ट करता है, तो यह उस वेब एलिमेंट ऑब्जेक्ट पर ऐड टूलटिप्स के रूप में एक एक्स्ट्रा इनफार्मेशन को प्रोवाइड करता है। मौजूदा वेबसाइट वेबपेज में टूलटिप्स फीचर्स को बिना कुछ अतिरिक्त मॉडिफिकेशन किये, एक टेक्स्ट कॉन्टेक्स्ट के हिंट इन्फो, डिटेल, या शार्ट वेब ऑब्जेक्ट एलिमेंट एक्सप्लेनेशन या कुछ गाइड या इंस्ट्रक्शन प्रोवाइड कर वेब यूज़र एक्सपीरियंस को इम्प्रूव कर सकते है।
Basic Tooltip in W3.CSS Web Development.
W3.CSS बेस्ड वेबपेज या वेबसाइट पर जब इंटनेट यूज़र किसी एलिमेंट पर माउस पॉइंटर को मूव करता है, तो यह उस ऑब्जेक्ट एलिमेंट पर एक सिंपल टूलटिप टेक्स्ट इनफार्मेशन को डिस्प्ले करता है। वेब डेवलपर किसी वेबपेज में टूलटिप के टेक्स्ट कंटेंट इनफार्मेशन को डिस्प्ले करने के लिए टाइटल एट्रिब्यूट के साथ w3-tooltip क्लास का यूज़ कर सकते हैं।
Example of Basic Tooltip in W3.CSS Web Development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<h2>Now you just move the mouse pointer button to see the tooltip text info</h2><br>
<button class=”w3-button w3-pink w3-tooltip” title=”Python Programming”>Python</button>
<button class=”w3-button w3-indigo w3-tooltip” title=”W3.css Web Development Script”>W3.css</button>
</body>
</html>
Explanation of Basic Tooltip in W3.CSS Web Development.
- w3-tooltip – यहाँ इस एक्साम्प्ल में w3-tooltip क्लास मौजूदा वेब एलिमेंट (यहाँ दो अलग अलग बटन) पर टूलटिप टेक्स्ट इन्फो को अप्लाई करता है. जब यूजर माउस पॉइंटर को इन बटन पर मूव करता है, तब इसमें ऐड एक टूलटिप टेक्स्ट इन्फो इन बटन पर डिस्प्ले करता है।
- title – यहाँ w3-tooltip क्लास में टाइटल एट्रिब्यूट के अंदर डिफाइन क्रिएटेड टेक्स्ट टूलटिप के रूप में यूज़ किया जाता है। यह टाइटल टेक्स्ट तब डिस्प्ले होता है, जब इंटरनेट यूज़र बटन पर माउस को ले जाता है।
Customizing the Position of a Tooltip in W3.CSS.
वेब डेवलपर W3.CSS में w3-tooltip क्लास का यूज़ कर मौजूदा ऑब्जेक्ट एलिमेंट पर टूलटिप की डिफ़ॉल्ट पोज़िशन को मैन्युअल कस्टमाइज़ कर सकते हैं। याद रहे, किसी वेबपेज में एक डिफ़ॉल्ट टूलटिप टेक्स्ट इन्फो वेब एलिमेंट के टॉप लोकेशन में डिस्प्ले करती है. लेकिन W3.CSS में वेब डेवलपर इन क्लास w3-left, w3-right, w3-top, और w3-bottom जैसी अन्य क्लास का यूज़ करके इन टूलटिप बिहेवियर को मैन्युअल कस्टमाइज कर सकते हैं।
Example of customizing tooltip position in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class Multiple Tooltip Direction</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<br><br>
<h2>Now you move the mouse button to see the tooltip text info in left, right, top & bottom, different </h2>
<button class=”w3-button w3-orange w3-tooltip w3-top” title=”Tooltip with Top Direction”>Tooltip Example with Top Direction </button>
<button class=”w3-button w3-indigo w3-tooltip w3-left” title=”Tooltip with Left Direction”>Tooltip Example with Left Direction</button>
<button class=”w3-button w3-red w3-tooltip w3-right” title=”Tooltip with Right Direction”>Tooltip Example with Right Direction</button>
<button class=”w3-button w3-lime w3-tooltip w3-bottom” title=”Tooltip with Bottom Direction”>Tooltip Example with Bottom Direction</button>
</body>
</html>
Explanation of customizing tooltip position in W3.CSS.
- w3-top – यहाँ इस एक्साम्प्ल में डिफ़ॉल्ट टूलटिप वेब एलिमेंट ऑब्जेक्ट लोकेशन को टॉप डायरेक्शन में डिस्प्ले करता है।
- w3-left – यह यूजर डिफाइन टूलटिप को वेब ऑब्जेक्ट एलिमेंट के लेफ्ट डायरेक्शन में डिस्प्ले करता है।
- w3-right – यह यूजर डिफाइन टूलटिप को वेब ऑब्जेक्ट एलिमेंट के राइट डायरेक्शन में डिस्प्ले करता है।
- w3-bottom – यह यूजर डिफाइन टूलटिप को वेब ऑब्जेक्ट एलिमेंट के बॉटम लोकेशन में डिस्प्ले करता है।
Tooltips with icons in W3.CSS web development.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर किसी वेबपेज या वेबसाइट के डिफ़ॉल्ट यूजर इंटरफ़ेस को ज़्यादा इंटरैक्टिव और इफेक्टिव बनाने के लिए किसी वेब एलिमेंट, बटन या ऑब्जेक्ट पर आइकन या दूसरे एलिमेंट पर भी आइकॉन टूलटिप को डिस्प्ले कर सकते हैं।
Example of a tooltip with icons in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class with Icons Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css”>
</head>
<body>
<h2>At Below you move mouse over the icons to see the text-based tooltips text info</h2>
<i class=”w3-tooltip w3-large w3-black w3-hover-shadow fa fa-address-book” title=”Address book symbol”></i>
<i class=”w3-tooltip w3-large w3-hover-shadow fa fa-university” title=”Bank icon”></i>
<i class=”w3-tooltip w3-large w3-hover-shadow fa fa-calendar” title=”Calendar icon”></i>
<h2>Some examples with icon class</h2>
<i class=”fa fa-trash” aria-hidden=”true”></i>
<i class=”fa fa-file” aria-hidden=”true”></i>
<i class=”fa fa-btc” aria-hidden=”true”></i>
<i class=”fa fa-apple” aria-hidden=”true”></i>
</body>
</html>
Explanation of a tooltip with icons in W3.CSS.
- Font Awesome Icons – यहाँ इस एक्साम्प्ल में fa क्लास का यूज़ Font Awesome आइकॉन लाइब्रेरी से सिंबॉलिक आइकॉन को डिस्प्ले करने में किया जाता है।
- w3-tooltip – आइकॉन लाइब्रेरी से यूज़ आइकॉन पर टेक्स्ट बेस्ड टूलटिप इन्फो किसी भी अन्य वेब एलिमेंट की तरह ही आइकॉन पर टूलटिप को ऐड कर डिस्प्ले किया जाता है।
- title – यह मौजूदा आइकॉन पर टूलटिप टेक्स्ट कंटेंट इनफार्मेशन को तब डिस्प्ले करता है, जब वेब यूज़र आइकॉन पर अपने माउस पॉइंटर को मूव करता है।
Tooltip information with custom content in W3.CSS.
W3.CSS बेस्ड वेबपेज वेबसाइट में सिंपल टूलटिप टेक्स्ट के लिए title एट्रिब्यूट का यूज़ करने के बदले, वेब डेवलपर किसी इमेज, टेक्स्ट, या एचटीएमएल वेब एलिमेंट जैसे कस्टम कंटेंट वाला अपना एक टूलटिप क्रिएट कर डिस्प्ले कर सकते हैं।
Example of a tooltip with custom text content in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore W3-Tooltip Class Custom Tooltip Attributes in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body class=”w3-padding”>
<h2>Let move mouse pointer on button to see the custom image tooltip info </h2>
<button class=”w3-button w3-pink w3-tooltip”>
Home Icon Button
<span class=”w3-text w3-white w3-padding w3-card-4″
style=”width:200px; left:50%; transform:translateX(-30%);”>
<strong>Home Image Icon</strong>
<br>
<img src=”https://cdn-icons-png.flaticon.com/128/2163/2163350.png”
alt=”home image”
style=”width:100px; margin-top:10px;”>
</span>
</button>
<br><br>
<button class=”w3-button w3-yellow w3-tooltip”>
Doctor Image Button
<span class=”w3-text w3-white w3-padding w3-card-4″
style=”width:200px; left:50%; transform:translateX(-30%);”>
<strong>Doctor Image </strong>
<br>
<img src=”https://images.pexels.com/photos/6749778/pexels-photo-6749778.jpeg”
alt=”Doctor Image”
style=”width:100px; margin-top:10px;”>
</span>
</button>
</body>
</html>
Explanation of a tooltip with custom text content in W3.CSS.
- Custom HTML in Tooltip – यह इस एक्साम्प्ल में टूलटिप को आइकॉन या इमेज के साथ डायनामिक रूप में डिस्प्ले करता है। यह मौजूदा टूलटिप के अंदर एचटीएमएल वेब कंटेंट का यूज़ करता है. जैसे, (<br><img src=”…”) ऑनलाइन इमेज आइकॉन डायनामिक लोकेशंन आदि है.
- Interactive Tooltip – यह वेबपेज में डिस्प्ले टूलटिप का कंटेंट ज़्यादा फ्लेक्सिबल बनाता है, जिससे वेब डेवलपर किसी आइकॉन, इमेज, वेब लिंक या अन्य एचटीएमएल एलिमेंट को मर्ज कर सकते हैं।
