Araç ipuçları
Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 23 / 35.
Araç ipuçları, kullanıcı bir arayüz öğesinin üzerine geldiğinde veya öğeye odaklandığında görünen küçük, bilgilendirici açılır öğelerdir. Ana kullanıcı arayüzünü kalabalıklaştırmadan ek bağlam sağlarlar.
HTML ve CSS kullanarak temel bir araç ipucu oluşturalım:
Önce HTML yapısını oluştur:
<div class="tooltip-container">
<button>Hover over me</button>
<span class="tooltip">This is a tooltip!</span>
</div>Ardından, araç ipucunu konumlandırmak ve gösterip gizlemek için CSS ekle:
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
visibility: hidden;
/* tooltip öğesini konumlandır */
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
/* tooltip öğesini yumuşak bir geçişle göster ve gizle */
opacity: 0;
transition: opacity 0.3s;
}
/* İmleç container öğesinin üzerine geldiğinde tooltip öğesini göster */
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}Bu kodla, düğmenin üzerine geldiğinde üstünde bir araç ipucu görünür.
Görev
KolayKullanıcı "Help" düğmesinin üzerine geldiğinde görünen araç ipucuna sahip bir HTML düğmesi veriliyor. Görevin:
- Araç ipucunu varsayılan olarak gizle.
- Öne çıkması için bir arka plan rengi ve metin rengi ekle.
- Araç ipucunun içindeki metni ortala.
- Araç ipucunun daha güzel görünmesi için biraz dolgu ekle.
border-radiusile köşeleri yuvarla.
Kendin dene
<!DOCTYPE html>
<html>
<head>
<title>Tooltips</title>
<style>
.tooltip-container {
position: relative;
display: inline-block;
margin: 50px;
}
button {
padding: 8px 16px;
cursor: pointer;
}
.tooltip {
/* Animation properties */
opacity: 0;
transition: opacity 0.3s;
}
/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip-container">
<button>Help</button>
<span class="tooltip">Click for assistance</span>
</div>
</body>
</html>
Kendini test etBu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.
Pratik Ön Yüz bölümündeki tüm dersler
3Temalandırma ve Görsel Stiller
CSS'te TemalandırmaKaranlık/Aydınlık Mod TemelleriVurgu Renkleri ve Öne ÇıkarmaTipografi TemalandırmaÖzet Meydan Okuması6Responsive Tasarım Kalıpları
Holy Grail DüzeniKart Izgara DüzeniYan Menü + İçerik DüzeniBölünmüş Ekran DüzeniYapışkan Üst / Alt BilgiGenel TekrarKendi başına pratik yap: Web playground