Membuat Tool Tip Memakai Css

Tool tip ini sanggup dipakai untuk membantu pembaca, salah satu misalnya ialah untuk mengatakan kepanjangan dari suatu singkatan. Untuk melihat pengaruh 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; /* kalau diinginkan komplemen 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 dikala 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