W3.CSS tooltiplar
W3.CSS tooltip klasslari
Tooltiplar (qalqib chiquvchi izohlar) foydalanuvchi sichqonchani element ustiga olib borganda qo‘shimcha ma’lumot ko‘rsatadi.
W3.CSS quyidagi tooltip klasslarini taqdim etadi:
| Klass | Vazifasi |
|---|---|
w3-tooltip |
Tooltip konteyneri |
w3-text |
Tooltip kontenti |
Sichqonchani quyidagi misollar ustiga olib boring:
London (9 million inhabitants) is the capital of England.
London 9 million inhabitants is the capital of England.
Tooltip konteyneri va matni
w3-tooltip klassi foydalanuvchi sichqonchani ustiga olib boradigan elementni belgilaydi.
w3-text klassi sichqoncha ustiga kelganda paydo bo‘ladigan kontentni belgilaydi.
Sichqonchani quyidagi jumla ustiga olib boring:
London (9 million inhabitants) is the capital of England.
Misol
<p class="w3-tooltip">London
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.
</p>
O‘zingiz sinab ko‘ring »
Teg ko‘rinishidagi tooltip
Tooltip kontentini teg ko‘rinishida bezash uchun w3-tag qo‘shing:
London 9 million inhabitants is the capital of England.
Misol
<p class="w3-tooltip">London
<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.
</p>
O‘zingiz sinab ko‘ring »
Rasmli tooltip
Tooltip rasmga oid matnni ham o‘z ichiga olishi mumkin:
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)
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)
Misollar
<div class="w3-tooltip">
<img src="img_car.jpg" alt="Car">
<p class="w3-text">A car is a...</p>
</div>
O‘zingiz sinab ko‘ring »
<div class="w3-tooltip">
<p class="w3-text">A car is a...</p>
<img src="img_car.jpg" alt="Car">
</div>
O‘zingiz sinab ko‘ring »
Joylashuvi belgilangan tooltip
Tooltip kontenti ma’lum bir joyda paydo bo‘lishini istasangiz, CSS joylashtirish (positioning) usullaridan foydalaning:
Misol
<p class="w3-tooltip">London
<span class="w3-text w3-tag"
style="position:absolute;left:0;bottom:18px">
9 million inhabitants
</span>
is the capital of England.
</p>
O‘zingiz sinab ko‘ring »
Rangli tooltip
w3-red kabi W3.CSS rang klassini qo‘shing:
Yumaloq burchakli tooltip
w3-round-xlarge kabi round klassini qo‘shing:
Misol
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
O‘zingiz sinab ko‘ring »
Tooltip o‘lchamlari
Tooltip o‘lchamini o‘zgartirish uchun W3.CSS o‘lcham klasslaridan foydalaning.
Kichik tooltip
Juda kichik tooltip
Katta tooltip
Animatsiyali tooltip
Tooltip kontentini asta paydo qilish uchun w3-animate-opacity qo‘shing:
Misol
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!