CSS ile ipuçları oluşturun.
Gösteri: ipucu Örnekler
Bir ipucu genellikle kullanıcı bir öğenin üzerine fareyi hareket ettirdiğinde şey hakkında ek bilgi belirtmek için kullanılır:
Temel İpucu
kullanıcı bir öğenin üzerine fareyi hareket ettirdiğ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> Kendin dene " Örnek Açıklaması
HTML) bir kap elemanını kullanın (like <div> ) ve eklemek "tooltip" buna sınıfı. Ne zaman bunun üzerinde kullanıcı fare <div> , bu ipucu metni gösterecektir.
Ipucu metin bir satır içi eleman içine yerleştirilir (like <span> ) ile class="tooltiptext" .
CSS) tooltip sınıfı kullanımı position:relative , araç ipucu metni konumlandırmak için gereklidir ( position:absolute ) . Not: ipucunu konumlandırmak nasıl yapılacağına ilişkin aşağıdaki örneklere bakın.
tooltiptext sınıfı gerçek ipucu metni tutar. Bu varsayılan olarak gizlidir ve vurgulu görünecektir (see below) . 120px genişlik, siyah arka plan rengini, beyaz metin rengi, ortalanmış metin ve 5px üst ve alt padding: Biz de ona bazı temel stilleri ekledik.
CSS3 border-radius özelliği ipucu metne yuvarlak köşeler eklemek için kullanılır.
:hover seçici kullanıcı üzerine fare hareket ettiğinde araç ipucu metni göstermek için kullanılır <div> ile class="tooltip" .
Konumlandırma Araç ipuçları
Bu örnekte, araç ipucu sağa yerleştirilir (left:105%) ait "hoverable" metin (<div>) . Ayrıca unutmayın top:-5px kabını elemanının ortasına yerleştirmek için kullanılır. Araç ipucu metin 5px bir üst ve alt dolgu vardır çünkü sayı 5 kullanıyoruz. Eğer Dolgusunu artırırsanız, ayrıca değerini artırmak top ortada kalmasını sağlamak için mülk (if this is something you want) . Eğer soluna yerleştirilen ipucu istiyorsanız, aynı geçerlidir.
Sağ ipucu
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Sonuç:
Sol İpucu
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Sonuç:
Eğer ipucu üstünde veya altında görünmesini istiyorsanız, aşağıdaki örneklere bakın. Kullandığımız unutmayın margin-left eksi 60 piksel değerine sahip özelliğini. Bu hoverable metnin altında / üstünde ipucunu ortalamaktır. Tooltipte genişliğinin yarısına ayarlanır (120/2 = 60) .
En İ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 Tooltip
.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ç ipucu belirli bir yanından görünür eklemek gerekir bir ok oluşturmak için "empty" sözde eleman sınıfıyla, ipucu sonra içeriği ::after birlikte content özelliği. ok kendisi sınırları kullanılarak oluşturulur. Bu konuşma balonu gibi ipucu göz yapacaktır.
Bu örnek araç ipucu altına bir ok eklemek gösterilmiştir:
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çıklaması
: Ipucu içindeki oku yerleştirin top: 100% araç ipucu alt kısmındaki oku yerleştirecektir. left: 50% oka ortalar.
Not: border-width mülkiyet ok boyutunu belirtir. Eğer bunu değiştirirseniz, da değişir margin-left aynı değer. Bu merkezli oku tutacak.
border-color bir ok haline içeriği dönüştürmek için kullanılır. Biz siyaha üst sınırını ve şeffaf gerisini ayarlayın. bütün taraflar siyah olsaydı, siyah kare kutu ile bitirmek istiyorum.
Bu örnek araç ipucu üstüne bir ok eklemek gösterilmiştir. Biz alt kenarlığı rengi bu kez set 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ç ipucu soluna bir ok eklemek gösterilmiştir:
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ç ipucu sağındaki bir ok eklemek gösterilmiştir:
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ı Fade (Animation)
Görünür olmak üzere eklendiğinde ipucu metinde solmaya için, size CSS3 kullanabilir transition ile birlikte özelliği opacity özelliği ve belirtilen saniyelik bir dizi, 100% görünür tamamen görünmez olmaktan gitmek (1 second in our example) :
Örnek
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Kendin dene " Not: geçişler ve daha sonra Öğretici animasyonlar hakkında daha fazla bilgi edineceksiniz.