Cara Membuat Tooltip Sederhana Dengan CSS di Blog

Cara Membuat Tooltip Sederhana Dengan CSS - Ya. Kali ini saya akan berbagi Cara Membuat Tooltip Sederhana Dengan CSS. Seperti apa tooltip itu? coba perhatikan dan sentuh link berikut :

"Contoh Tooltip"

Langkah pertama Login ke www.blogger.com

Pilih Template > Edit HTML lalu cari kode ]]></b:skin>

Kemudian letakkan kode dibawah ini diatas kode ]]></b:skin>

.tooltip{position:relative; display:inline-block; white-space:nowrap}
.tooltip-content{opacity:0; visibility:hidden; font:12px Arial,Helvetica; text-align:center; border-color:#aaa #555 #555 #aaa; border-style:solid; border-width:1px; width:auto; padding:15px; position:absolute; bottom:40px; left:50%; margin-left:-76px; background-color:#fff; background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.1)),to(rgba(255,255,255,0))); background-image:-webkit-linear-gradient(rgba(0,0,0,.1),rgba(255,255,255,0)); background-image:-moz-linear-gradient(rgba(0,0,0,.1),rgba(255,255,255,0)); background-image:-ms-linear-gradient(rgba(0,0,0,.1),rgba(255,255,255,0)); background-image:-o-linear-gradient(rgba(0,0,0,.1),rgba(255,255,255,0)); background-image:linear-gradient(rgba(0,0,0,.1),rgba(255,255,255,0)); -moz-box-shadow:1px 1px 0 #555,2px 2px 0 #555,3px 3px 1px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow:1px 1px 0 #555,2px 2px 0 #555,3px 3px 1px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.5) inset; box-shadow:1px 1px 0 #555,2px 2px 0 #555,3px 3px 1px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.5) inset; -webkit-transition:bottom .2s ease,opacity .2s ease; -moz-transition:bottom .2s ease,opacity .2s ease; -ms-transition:bottom .2s ease,opacity .2s ease; -o-transition:bottom .2s ease,opacity .2s ease; transition:bottom .2s ease,opacity .2s ease}
.tooltip-content:after,
.tooltip-content:before{border-right:16px solid transparent; border-top:15px solid #fff; bottom:-15px; content:""; position:absolute; left:50%; margin-left:-10px}
.tooltip-content:before{border-right-width:25px; border-top-color:#555; border-top-width:15px; bottom:-15px}
.tooltip:hover .tooltip-content{opacity:1; visibility:visible; bottom:30px}

Setelah itu sisipkan kode ini di bawah kode ]]></b:skin>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='https://lioneldandy.googlecode.com/files/DANDYtooltip.js'
type='text/javascript'></script>

Langkah terakhir, klik Save Template / Simpan Template

Cara utk penggunaan Tool Tip ini sangat sederhana, anda tinggal menaruh kode anda yg ingin disisipkan tooltip dengan data-tooltip="Title"  contoh :

<a class='DANDYtext' href='#test' data-tooltip='Test Tooltip | Xpress Community'>Test Tooltip | Xpress Community</a>
Atau
<a href="Link" data-tooltip="Isi untuk judul nya (tooltipnya)">Judulnya</a> 
Nah data-tooltip='Test Tooltip | Xpress Community' itu untuk Tooltip / Titlenya ...

Demo

Sekian dari saya, semoga artikel ini Bermanfaat untuk sobat.

Tweet

Postingan terkait:

Ditulis Dandi Saseno — Thursday, 2 May 2013 — 13 Comments — tips and trick, tutorial blog