Cara Membuat Pure CSS3 Tooltips Di Blog

Cara Membuat Pure CSS3 Tooltips Di Blog | Tooltips memang jarang dipakai, karena penggunannya yang cukup rumit, tapi tooltips bisa di pakai di blog untuk membuat blog lebih tampak indah. Apalagi yang sudah tersentuh CSS, semua akan jauh lebih indah.

CSS, Pure CSS3 Tooltips

a.tooltip {
    position: relative;
    display: inline;
}

a.tooltip span {
    position: absolute;
    left: 50%;
    width:140px;
    padding: 6px;
    margin-left: -76px;
    background: #000; /*warna latar*/
    color: #fff; /*warna huruf*/
    text-align: center;
    visibility: hidden;
    border-radius: 5px;
} 
        
a.tooltip span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0; height: 0;
    border-top: 8px solid black;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
        
a:hover.tooltip span {
    visibility: visible;
    opacity: 0.8;
    bottom: 30px;
    z-index: 999;
}

HTML, Pure CSS3 Tooltips

<a class="tooltip" href="#">Teks Link<span>Teks Tooltips</span></a>

DEMO