CSS İle İpucu Baloncuğu(Tooltip) Yapımı

Tooltip, bir HTML etiketinin üzerine gelindiğinde, açıklama amaçlı bir metin gösterilmesi işlemidir. HTML etiketinin üzerine mouse ile gelindiğinde görünen metne yada yönlendirici ifadeye Türkçe karışılığı ile ipucu baloncuğu denilmektedir.

Bu eğitimde, CSS kodlarını kullanarak mouse ile HTML etiketinin üzerine gelindiğinde ipucunun nasıl gösterileceğinden bahsedeceğim. CSS ile hazırladığımız ipucu gösteriminde, HTML etiketinin sağında, solunda, altında yada üstünde olmak üzere yerleştirmesini yapacağız.

Tooltip HTML Kodları

İlk olarak HTML kodlarını oluşturuyoruz. Burada ilk HTML etiketinde ana değeri yazıyoruz. İkindi HTML etiketine de açıklama olarak gösterilecek değeri yazıyoruz.

<div class="tooltip bottom">Yazının Üstün Gel
    <span class="tiptext">Merhaba :) Naber?</span>
</div>

Yukarıdaki HTML kodlarında, ipucu baloncuğunun temelini oluşturan HTML etiketini oluşturmuş oluyoruz. Şimdi ise CSS kodlarını hazırlayalım.

Tooltip CSS Kodları

Hazırlamış olduğumuz HTML kodlarını düzenlemek ve şekillendirmek için CSS kodlarını kullanıyoruz. CSS kodlarıyla birlikte, ipucu baloncuğunu kullanılabilir bir seviyeye getirmiş oluyoruz.

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}

Yukarıdaki kodlarla birlikte şekillendirme işlemini sağlamış oluyoruz. Şimdiyse gösterimin sağda, solda, aşağıda yada üstte olması gerektiğini belirtecek kodları yazalım.

Üstten Açılan Tooltip CSS Kodları

.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;
}

Alttan Açılan Tooltip CSS Kodları

.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;
}

Sağdan Açılan Tooltip CSS Kodları

.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;
}

Soldan Açılan Tooltip CSS Kodları

.tooltip.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;
}

Bu şekillendirmelerle birlikte kullanılabilir bir tooltip oluşturmuş olacaksınız.