Cara membuat tooltip sederhana dengan css3

Pada tutorial kali ini saya akan berbagi tentang bagaimana cara membuat tooltip sederhana dengan css3. Tooltip sendiri berguan untuk membantu pengguna mengetahui rincian apa yang ditawarkan pada website kita atau dapat digunakan untuk menjelaskan deskripsi panjang atau rincian dari setiap link, kotak input atau apa pun yang ingin memberikan informasi tambahan. Tooltip meningkatkan pengalaman pengguna situs Anda. oke tidak perlu berpanjang lebar langsung saja lihat source codenya dibawah ini.

kode html

<div class="tooltip">
    <p>Tutorial website lelampak datu</p>
</div>

kemudian setelah itu copy code css-nya:

<style type="text/css">
html{
    background-color:hsl(75, 70%, 92%);
}

body{
    font:14px 'Arial', 'Helvetica', sans-serif;
    color: hsl(201, 100%, 38%);
}
.tooltip{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.tooltip-h{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 20%;
    width: 30px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.tooltip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}
.tooltip-h:before{
    content:'help';
    font-weight: bold;
    color:#fff;
}

.tooltip:hover p, .tooltip-h:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.tooltip p, .tooltip-h p{    
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.tooltip p:before, .tooltip-h p:before{ 
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.tooltip p:after, tooltip-h p:after{ 
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
      keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}
#content {
    background-color: hsl(75, 1%, 92%);
    border-radius: 4px;
    padding: 40px;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    margin: 0 auto 100px;
}

</style>  opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

tidak sulit bukan?