Embedded Files
Hazırlayan:ALPEREN GÜLSOY
CSS tooltip ve popover ikisi de bir web sayfasında veya uygulamada bir elementin üzerine geldiğinde görüntülenen bilgi veya açıklamaları göstermek için kullanılan tasarım öğeleridir. Ancak aralarında bazı farklılıklar vardır.
CSS tooltip - bir elementin üzerine geldiğinde hızlı bir şekilde açıklama veya bilgi sağlamak için kullanılır. Tooltip'lar genellikle basit ve kullanımı kolaydır.
CSS popover - bir elementin üzerine geldiğinde daha fazla ayrıntı sağlamak için kullanılır. Popover'lar, tooltip'lardan daha büyük ve daha kapsamlıdır ve içerik olarak metin, resim, bağlantı ve diğer öğeleri içerebilir. Popover'lar genellikle bir düğme veya simge üzerine tıklanarak açılır ve genellikle bir pencere gibi görüntülenir.
CSS Tooltip örneği:
HTML:
<button class="tooltip">tooltip örneği</button>
<span class="tooltip-text">tooltip açıklaması</span>
Açıklaması:Bu örnekte, bir düğmeye 'tooltip' sınıfı verildi ve 'tooltip-text' sınıfı ile eşleştirildi. 'tooltip-text' sınıfı, tooltip açıklamasını içeren bir span elementidir. CSS kodu, 'tooltip-text' elementinin görüntülenmesi için :hover seçicisini kullanan bir açıklama stilini tanımlar.
CSS:
.tooltip {
position: relative;
}
.tooltip-text {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
font-size: 14px;
}
.tooltip:hover .tooltip-text {
display: block;
}
Fade In Araç İpuçları (Animasyon):
Araç ipucu metnini görünmek üzereyken soldurmak istiyorsanız, CSS geçiş özelliğini opaklık özelliğiyle birlikte kullanabilir ve belirli bir saniye içinde (1 saniye) tamamen görünmez durumdan %100 görünür duruma geçebilirsiniz. bizim örneğimizde):
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
CSS Popover örneği:
HTML:
<button class="popover-btn">Bu bir popover örneği</button>
<div class="popover-content">
<h3>Popover Başlık</h3>
<p>Bu bir popover açıklamasıdır.</p>
<a href="#">Daha fazla bilgi için tıklayın</a>
</div>
Açıklaması: Bu örnekte, bir düğmeye 'popover-btn' sınıfı verildi ve popover içeriği 'popover-content' sınıfı ile eşleştirildi. CSS kodu, popover içeriğinin görüntülenmesi için :hover seçicisini kullanarak, düğmenin hemen yanında 'popover-content' elementinin görüntülenmesi için stil özellikleri tanımlar. Popover içeriği, başlık, metin ve bir bağlantı gibi öğeler içerir ve daha kapsamlı bir açıklama sağlar.
CSS
.popover-btn {
position: relative;
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
font-size: 14px;
}
.popover-content {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #fff;
color: #333;
border-radius: 5px;
font-size: 14px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
width: 250px;
}
.popover-content a {
display: block;
margin-top: 10px;
}
.popover-btn:hover + .popover-content {
display: block;
}
Page updated
Report abuse