W3.CSS Araç İpuçları
Fareyle aşağıdaki cümlelerin üzerine gelin:
Londra , İngiltere'nin başkentidir.(9 million inhabitants)
Londra 9 million inhabitants , İngiltere'nin başkentidir.
W3.CSS Araç İpucu Sınıfları
W3.CSS, aşağıdaki araç ipucu sınıflarını sağlar:
| Sınıf | tanımlar |
|---|---|
| w3-araç ipucu | araç ipucu öğesi |
| w3-metin | araç ipucu metni |
Araç İpucu Öğesi ve Araç İpucu Metni
Araç ipuçları, bir HTML öğesinin üzerine geldiğinizde metni (veya diğer içeriği) görüntüler.
w3-tooltip sınıfı , üzerine gelinecek öğeyi tanımlar (araç ipucu kabı).
w3-text sınıfı, araç ipucu metnini tanımlar .
Fareyle aşağıdaki cümlenin üzerine gelin:
Londra , İngiltere'nin başkentidir.(9 million inhabitants)
Örnek
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Etiket Olarak Araç İpucu
Fareyle aşağıdaki cümlenin üzerine gelin:
Londra 9 million inhabitants , İngiltere'nin başkentidir.
Örnek
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Resim İpucu
Efekti görmek için bu resmin üzerine gelin:
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)
Örnek (resmin önündeki metin)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Örnek (resimden sonraki metin)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Mutlak Konumlandırılmış İpucu
Araç ipucunun mutlak bir konumda görünmesini istiyorsanız, araç ipucu metnini CSS ile konumlandırın:
Örnek
<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>
Renkli Araç İpucu
Renkli bir araç ipucu istiyorsanız, w3- renk sınıflarını kullanın:
Örnek
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Yuvarlatılmış Araç İpucu
Yuvarlak bir araç ipucu istiyorsanız, w3- round sınıflarını kullanın:
Örnek
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Küçük Araç İpucu
Küçük bir araç ipucu istiyorsanız, w3-small sınıfını kullanın:
Örnek
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Küçük Araç İpucu
Küçük bir araç ipucu istiyorsanız, w3-tiny sınıfını kullanın:
Örnek
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Büyük Araç İpucu
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>