Cara Membuat Tooltip Sederhana Menggunakan HTML5 dan CSS3

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Tooltip Sederhana Menggunakan HTML5 dan CSS3. Apa itu tooltip, tooltip adalah sebuah efek yang menunjukan keterangan ketika cursor berada di tempat yang kita tuju, oke langsung saja yah teman teman bisa langsung salinkan scriptnya dibawah sini :

<body style="text-align:center;">

<p>Arahkan Kursor Anda Ke Input Text:</p>

<div class="tool">
    <input type="text" name="nama" placeholder="NAMA ANDA">
  <span class="tools">Isikan Nama Anda</span>
</div>

</body>

<style>
.tool {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tool .tools {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tool:hover .tools {
    visibility: visible;
}
</style>

Jika sudah disave lalu di jalankan, mudah yah, sangat mudah, oke cukup sekian tutorial tentang Bagaimana Cara Membuat Tooltip Sederhana Menggunakan HTML5 dan CSS3, sampai bertemu di artikel selanjutnya dan sampai jumpa ..

#KeepLearn

#IsmetMA