CSS tooltip

 

Berawal dari blog Dosen saya,saya merasa tertarik dengan grafis yang di terapkan di situ,salah satunya tooltips,suatu tampilan yang muncul ketika mouse di arahkan ke komponen,munculan ini dapat berisi informasi ataupun hal lain yang berkaitan sehingga dengan menerapkan tooll ini,tidak memenuhi tampilan utama dalam website.

Di bawah ini adalah code CSS nya.

.has-tooltip { //pengaturan judul tooltips

background: #ececec;

color: #555;

cursor: help;

font-family: "Gill Sans", Impact, sans-serif;

font-size: 20px;

margin: 100px 75px 10px 75px;

padding: 15px 20px;

position: relative;

text-align: center;

text-transform: uppercase;

width: 200px;

-webkit-transform: translateZ(0); /* webkit flicker fix */

-webkit-font-smoothing: antialiased; /* webkit text rendering fix */

}

.has-tooltip .tooltip { //pengaturan laman yang akan di tampilkan

background: #1496bb;

bottom: 100%;

color: #fff;

display: block;

left: -25px;

margin-bottom: 15px;

opacity: 0;

padding: 20px;

position: absolute;

visibility: hidden;

width: 100%;

-webkit-transform: translateY(10px);

-moz-transform: translateY(10px);

-ms-transform: translateY(10px);

-o-transform: translateY(10px);

transform: translateY(10px);

-webkit-transition: all .25s ease-out;

-moz-transition: all .25s ease-out;

-ms-transition: all .25s ease-out;

-o-transition: all .25s ease-out;

transition: all .25s ease-out;

-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */

.has-tooltip .tooltip:before {

bottom: -20px;

content: " ";

display: block;

height: 20px;

left: 0;

position: absolute;

width: 100%;

}

/* CSS Triangles - see Trevor's post */

.has-tooltip .tooltip:after {

border-left: solid transparent 10px;

border-right: solid transparent 10px;

border-top: solid #1496bb 10px;

bottom: -10px;

content: " ";

height: 0;

left: 50%;

margin-left: -13px;

position: absolute;

width: 0;

}

.has-tooltip:hover .tooltip {

opacity: 1;

visibility: visible;

-webkit-transform: translateY(0px);

-moz-transform: translateY(0px);

-ms-transform: translateY(0px);

-o-transform: translateY(0px);

transform: translateY(0px);

}

Kemudian untuk pemanggilan code di HTML nya bisa liat di bawah ini,text yang akan di tampilkan bisa di sesuaikan atau di ubah sesuai keinginan sobat.

<div class="has-tooltip">

//judul tooltipnya

<span class="tooltip">//text yang akan di tampilkan ketika mouse di diarahkan ke objek</span>

</div>

Hasilnya kira kira seperti ini,jadi ketika mouse di arahkan ke tulisan judul tooltips nya maka akan keluar artikel sesuai yang kita masukan.

Click untuk melihat hasilnya

Oke semoga bermanfaat,selamat mencoba.