CSS3 Tooltips

by

Tooltips adalah element yang akan muncul ketika kursor dideketin ke suatu teks / element lain. Contoh:

Arahkan mouse kesini TARAAAA Ini tooltips!

Kodenya: 

<style>
.tooltip {
 position: relative; 
 display: inline-block;
}

.tooltip .tooltip-teks {
 visibility: hidden;
 width: 150px;
 background-color: #5340ff;
 color: white;
 text-align: center;
 padding: 10px;
 border-radius: 10px;
 position: absolute;
 z-index: 1;
}

.tooltip:hover .tooltip-teks {
 visibility: visible;
}
</style>
<div class="tooltip">
  <span>Arahkan mouse kesini</span>
  <span class="tooltip-teks">
  TARAAAA Ini tooltips!
  </span>
</div>

Keterangan:

  • Teks yang akan muncul ada di dalam class tooltip-teks.
  • Setting default visibility dari tooltip-teks menjadi hidden
  • Kemudian ketika tooltip-teks di hover maka diganti dengan visible
  • position dari tooltip-teks adalah absolute

Tooltip Diatas

Top Tooltip Tooltip text

Kodenya:

<style>
.tooltip2 {
 position: relative;
 margin-right: 20px;
 display: inline-block;
 float: left;
}

.tooltip-atas {
    bottom: 115%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-teks2 {
 visibility: hidden;
 position: absolute;
 width: 120px;
 background-color: #5340ff;
 color: #fff;
 text-align: center;
 padding: 5px 0;
 border-radius: 3px;
 z-index: 1;
 opacity: 0;
 transition: opacity .5s;
}

.tooltip2:hover .tooltip-teks2 {
 visibility: visible;
 opacity: 1;
}
</style>
<div style="height:100px; border:1px solid black; padding:10px;">
	<div style="margin-top:30px; margin-left: 20px;" class="tooltip2"><strong>Top Tooltip</strong>
 <span class="tooltip-teks2 tooltip-atas">Tooltip text</span>
</div>

Untuk tampilan lain, kita akan bahas ketika sudah sampai bab bootstrap ya.

Leave a Comment