Membuat tool tip menggunakan CSS

Tool tip ini dapat digunakan untuk membantu pembaca, salah satu contohnya adalah untuk menunjukkan kepanjangan dari suatu singkatan. Untuk melihat efek tooltip, arahkan kursor pada kata yang diberikan tooltip. Contoh disini, kata yang diberi garis bawah dot.

Tampilan yang diinginkan

TCP/IP Transmission Control Protocol/ Internet protocol

TCP Transmission Control Protocol

dan

UDP User Datagram Protocol

merupakan protocol transport pada TCP/IP

CSS dan HTML yang digunakan

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted green; /* jika diinginkan tambahan dot pada teks */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: lightgreen;
    color: darkgreen;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

/* Posisi tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Panah Tooltip */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: green transparent transparent transparent;
}

/* Menunjukkan text tooltip ketika kursor diarahkan ke container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>

<div class="tooltip">
TCP/IP
  <span class="tooltiptext">Transmission Control Protocol/ Internet protocol </span>
</div>
<br />
<br />
<div class="tooltip">
TCP
  <span class="tooltiptext">Transmission Control Protocol</span>
</div>
dan
<div class="tooltip">
UDP
<span class="tooltiptext">User Datagram Protocol</span>
</div>
merupakan protocol transport pada TCP/IP