W3.CSS टूलटिप्स
नीचे दिए गए वाक्यों पर होवर करें:
लंदन इंग्लैंड की राजधानी है।(9 million inhabitants)
लंदन 9 million inhabitants इंग्लैंड की राजधानी है।
W3.CSS टूलटिप क्लासेस
W3.CSS निम्नलिखित टूलटिप कक्षाएं प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-टूलटिप | टूलटिप तत्व |
| w3-पाठ | टूलटिप टेक्स्ट |
टूलटिप तत्व और टूलटिप टेक्स्ट
जब आप किसी HTML तत्व पर होवर करते हैं तो टूलटिप्स टेक्स्ट (या अन्य सामग्री) प्रदर्शित करते हैं।
w3-टूलटिप वर्ग उस तत्व को परिभाषित करता है जिस पर होवर करना है (टूलटिप कंटेनर)।
W3- पाठ वर्ग टूलटिप पाठ को परिभाषित करता है।
नीचे दिए गए वाक्य पर होवर करें:
लंदन इंग्लैंड की राजधानी है।(9 million inhabitants)
उदाहरण
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
एक टैग के रूप में टूलटिप
नीचे दिए गए वाक्य पर होवर करें:
लंदन 9 million inhabitants इंग्लैंड की राजधानी है।
उदाहरण
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
छवि टूलटिप
प्रभाव देखने के लिए इस चित्र पर होवर करें:
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
उदाहरण (तस्वीर से पहले पाठ)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
उदाहरण (चित्र के बाद पाठ)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
निरपेक्ष स्थित टूलटिप
यदि आप टूलटिप को पूर्ण स्थिति में दिखाना चाहते हैं, तो टूलटिप टेक्स्ट को CSS के साथ रखें:
उदाहरण
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
रंगीन टूलटिप
यदि आप एक रंगीन टूलटिप चाहते हैं, तो w3- रंग वर्गों का उपयोग करें:
उदाहरण
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
गोल टूलटिप
यदि आप एक गोलाकार टूलटिप चाहते हैं, तो w3- गोल कक्षाओं का उपयोग करें:
उदाहरण
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
छोटा टूलटिप
यदि आप एक छोटा टूलटिप चाहते हैं, तो w3-छोटे वर्ग का उपयोग करें:
उदाहरण
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
छोटा टूलटिप
यदि आप एक छोटा टूलटिप चाहते हैं, तो w3-छोटे वर्ग का उपयोग करें:
उदाहरण
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
बड़ा टूलटिप
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>