CSS Araç İpucu
- Önceki Sayfa CSS Animasyon
- Sonraki Sayfa CSS Görsel Stili
CSS ile araç ipucu (Tooltip) oluşturun。
Gösterim: Araç ipucu
Örnek
Kullanıcı fare işaretçisini bir elemente götürdüğünde, araç ipucu genellikle ek bilgi sağlamak için kullanılır:
基础的工具提示
创建一个鼠标移到元素上时显示的工具提示：
Örnek
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位工具提示文本 - 请看下面的例子 */
position: absolute;
z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
Örnek açıklaması
HTML:
Konteyner elementi (örneğin <div>) kullanarak ve ona ekleyerek "tooltip" Sınıfı. Kullanıcı bu <div> üzerine fareni yuvarlandırdığında, araç ipucu metni görüntülenir.
Araç ipucu metni class="tooltiptext" 嵌入式 elementler (örneğin <span>) içinde kullanılır.
CSS:
tooltip Sınıf position:relative，aracık metnini yerleştirmek için kullanılır (position:absolute）。Dikkat edin: Araç ipucunu nasıl yerleştireceğinize dair örnekler için aşağıya bakın.
tooltiptext Sınıf gerçek araç ipucu metnini saklar. Varsayılan olarak gizlidir ve fareni yuvarlandırdığında görünür olur (aşağıya bakın). Ayrıca bazı temel stiller ekledik: 120 piksel genişlik, siyah arka plan, beyaz metin, metin ortası ve 5px yukarı ve aşağı iç kenar boşluğu (padding).
CSS border-radius Özelliği, araç ipucu metnine yuvarlak köşeler eklemek için kullanılır.
Kullanıcı class="tooltip" olan <div> üzerine fareyi getirdiğinde:hover Araç ipucu metnini göstermek için kullanılan seçicidir.
Araç ipucunu konumlandırma
Bu örnekte, araç ipucu 'geçici' metin (<div>)un sağında yer alıyor (left:105%）。Ayrıca dikkat edin:top:-5px Onu konteyner elementinin ortasına yerleştirmek için kullanılır. Sayı 5'i, araç ipucu metni etrafındaki yukarı ve aşağı iç kenar boşluğu 5px olduğundan kullanıyoruz. İç kenar boşluğunu artırırsanız, lütfen aynı zamanda artırın top Özelliğin değeri, onun ortada kalmasını sağlamak için kullanılır. Aracığı sol tarafa koymak için de geçerlidir.
Sağ araç ipucu
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Sonuç:
Sol araç ipucu
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Sonuç:
Aracıkın yukarıda veya aşağıda olmasını istiyorsanız, aşağıdaki örneklere bakın. Lütfen dikkat edin, negatif 60 piksel sol dış kenar boşluğu özelliğini (margin-left) kullandık. Bu, aracığı geçici metin ile ortalamak içindir. Bu değer aracık genişliğinin yarısıdır (120/2 = 60).
Üst araç ipucu
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Genişliğin yarısını kullan (120/2 = 60), aracığı ortalamak için */
}
Sonuç:
Alt araç ipucu
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Genişliğin yarısını kullan (120/2 = 60), aracığı ortalamak için */
}
Sonuç:
Aracık oku
Aracık arka yüzünde gösterilecek ok oluşturmak için, aracığın ardından 'boş' içeriği ekleyin ve sahte element sınıfını kullanın ::after ve content öznitelikleri. Ok, araç ipucunu balon gibi görünmesini sağlar.
Bu örnek, araç ipucunun altına nasıl bir ok eklenacağının gösterilmesi gerektiğini açıklamaktadır:
Alt yön oku
.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ı
Arkanı araç ipucunu içinde konumlandırın:top: 100% Arkanı araç ipucunun altına yerleştirin.left: 50% okun ortasında yerleşmesini sağlar.
Uyarı:border-width öznitelik, okun boyutunu belirtir. Bu ayarı değiştirirseniz, lütfen margin-left değerini aynı değere ayarlayın. Bu, okun ortasında yerleşmesini sağlar.
border-color İçeriği ok haline dönüştürmek için kullanılır. Üst çizgiyi siyah olarak ayarlıyoruz, diğerlerini şeffaf olarak ayarlıyoruz. Tüm yüzeyler siyahsa, sonunda siyah bir kare çerçeve elde edersiniz.
Bu örnek, araç ipucunun üstüne nasıl bir ok eklenacağının gösterilmesi gerektiğini açıklamaktadır. Lütfen dikkat edin, bu sefer alt çizgi rengini ayarladık:
Üst yön oku
.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 bir ok eklenacağının gösterilmesi gerektiğini açıklamaktadır:
Sol yön oku
.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 bir ok eklenacağının gösterilmesi gerektiğini açıklamaktadır:
Sağ yön oku
.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ç:
Solma Etkili Araç İpucu (Animasyon)
Eğer yeni görüntülenen araç ipucu metninde solma-yakınma etkisi istiyorsanız, CSS transition Özelliği opacity Özellikler birlikte kullanılır ve belirtilen saniye (örnekte 1 saniye) içinde tamamen görünmezden %100 görünürlüğe geçiş yapar:
Örnek
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Önceki Sayfa CSS Animasyon
- Sonraki Sayfa CSS Görsel Stili
