CSS Araç İpucu
CSS ile araç ipuçları oluşturun.
Demo: Araç İpucu Örnekleri
Kullanıcı fare imlecini bir öğenin üzerine getirdiğinde, bir şey hakkında ek bilgi belirtmek için genellikle bir araç ipucu kullanılır:
Temel Araç İpucu
Kullanıcı fareyi bir öğenin üzerine getirdiğinde görünen bir araç ipucu oluşturun:
Örnek
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Örnek Açıklama
HTML: Bir kapsayıcı öğesi kullanın (<div> gibi) ve buna
"tooltip"sınıfı ekleyin. Kullanıcı fareyi bu <div> üzerine getirdiğinde, araç ipucu metnini gösterecektir.
Araç ipucu metni, satır içi bir öğenin (<span> gibi) içine yerleştirilir class="tooltiptext".
CSS: Araç ipucu metnini ( ) konumlandırmak için gerekli olan tooltipsınıf kullanımı .
Not: Araç ipucunun nasıl konumlandırılacağına ilişkin aşağıdaki örneklere bakın.position:relativeposition:absolute
Sınıf tooltiptext, gerçek araç ipucu metnini tutar. Varsayılan olarak gizlidir ve üzerine gelindiğinde görünür olacaktır (aşağıya bakın). Buna ayrıca bazı temel stiller ekledik: 120 piksel genişlik, siyah arka plan rengi, beyaz metin rengi, ortalanmış metin ve 5 piksel üst ve alt dolgu.
CSS border-radiusözelliği, araç ipucu metnine yuvarlatılmış köşeler eklemek için kullanılır.
Seçici :hover, kullanıcı fareyi ile <div> üzerinde hareket ettirdiğinde araç ipucu metnini göstermek için kullanılır class="tooltip".
Konumlandırma İpuçları
Bu örnekte, araç ipucu left:105%"gezinebilir" metnin (<div>) sağına ( ) yerleştirilmiştir. top:-5pxAyrıca bunun , onu konteyner elemanının ortasına yerleştirmek için kullanıldığını unutmayın . Araç ipucu metni 5 piksellik bir üst ve alt dolguya sahip olduğu için 5 sayısını kullanıyoruz . Dolgusunu artırırsanız, toportada kalmasını sağlamak için mülkün değerini de artırın (eğer bu istediğiniz bir şeyse). Aynı şey, araç ipucunun sola yerleştirilmesini istiyorsanız da geçerlidir.
Sağ Araç İpucu
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Sonuç:
Sol Araç İpucu
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Sonuç:
Araç ipucunun üstte veya altta görünmesini istiyorsanız aşağıdaki örneklere bakın. margin-leftÖzelliği eksi 60 piksel değerinde kullandığımızı unutmayın . Bu, araç ipucunu üzerine gelinebilir metnin üstüne/altına ortalamak içindir. Araç ipucunun genişliğinin yarısına ayarlanır (120/2 = 60).
En İyi İpucu
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Sonuç:
Alt Araç İpucu
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Sonuç:
İpucu Okları
Araç ipucunun belirli bir tarafından görünmesi gereken bir ok oluşturmak için, sözde öğe sınıfıyla ::afterbirlikte araç ipucundan sonra "boş" içerik ekleyin content
. Okun kendisi kenarlıklar kullanılarak oluşturulur. Bu, ipucunun bir konuşma balonu gibi görünmesini sağlayacaktır.
Bu örnek, araç ipucunun altına nasıl ok ekleneceğini gösterir:
Alt Ok
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Sonuç:
Örnek Açıklama
Oku araç ipucunun içine yerleştirin: top: 100%oku araç ipucunun altına yerleştirir. left: 50%oku ortalayacaktır.
Not: Özellik border-width, okun boyutunu belirtir. Bunu değiştirirseniz, margin-leftdeğeri de aynı şekilde değiştirin. Bu, oku merkezde tutacaktır.
border-colorİçeriği bir oka dönüştürmek için kullanılır . Üst kenarlığı siyah, geri kalanını şeffaf olarak ayarladık. Tüm taraflar siyah olsaydı, siyah kare bir kutu elde edersiniz.
Bu örnek, araç ipucunun üstüne nasıl ok ekleneceğini gösterir. Bu sefer alt kenarlık rengini belirlediğimize dikkat edin:
Üst Ok
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Sonuç:
Bu örnek, araç ipucunun soluna nasıl ok ekleneceğini gösterir:
Sol ok
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Sonuç:
Bu örnek, araç ipucunun sağına nasıl ok ekleneceğini gösterir:
Sağ ok
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Sonuç:
Araç İpuçlarında Soldurma (Animasyon)
Araç ipucu metninde görünür hale gelmek üzereyken solmasını istiyorsanız, CSS transitionözelliğini özellik ile birlikte kullanabilir opacity
ve tamamen görünmez olmaktan %100 görünür hale belirli bir sayıda (bizim süremizde 1 saniye) geçebilirsiniz. örnek):
Örnek
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}