Membuat Tooltip Dengan CSS

Tooltip merupakan informasi tambahan pada teks yang akan muncul ketika mouse di arahkan ke area teks .

Untuk membuat tooltip , buat file dengan nama tooltip.html , kemudian masukkan script di bawah ini ke dalam file tooltip.html

<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

margin: 10px;

/* Position the tooltip */

position: absolute;

z-index: 1;

}

.tooltip:hover .tooltiptext {

visibility: visible;

}

</style>

<p>arahkan Mouse Pada Text Di Bawah ini:</p>

<div class=”tooltip”>Letakkan Mouse Disini

<span class=”tooltiptext”>Teks Tooltip</span>

</div>

</body>

</html>

Maka tampilan dari script di atas saat mouse di arahkan ke area teks seperti di bawah ini

Created By : Muhammad Bashir