KianHome - Tutorial kali ini akan kian bahas mengenai cara simple dalam membuat "Tooltip", namun untuk saat ini kita akan menggabungkan antara Jquery dan CSS code. Tampilan simple Tooltips yang k'ian maksud memang benar-benar simple karena kita hanya akan menambahkan sedikit kode CSS dan Jquery nya saja.

Untuk lebih lanjut kita mulai tutorialnya :
Copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>

.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Selanjutnya copy lagi kode Jquery dibawah ini dan letakkan sebelum kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">

<script src='https://sites.google.com/site/kianbersama/javascript/simpletooltips.js' type='text/javascript'type='text/javascript'/>

Jika Sebelumnya kode 1 (1.3.6, 1.4.2, 1.4.3) sudah ada diblog kamu, maka yang perlu kamu copy cukup kode 2 saja.

Penerapan dalam Link
Jika semua kode telah terpasang, maka yang patut kamu lakukan adalah memasang didalam postingan yang akan kamu buat. cara cukup mudah namun harus sedikit cermat. Untuk link kita akan menggunakan class="tip_trigger", sedangkan untuk tampilan Tooltipsnya kita akan menggunakan class="tip", untuk lebih jelas lihat dibawah ini :

<a href="#" class="tip_trigger">Untuk link yang akan dipasang<span class="tip">Ini adalah isi dari tooltips yang kita buat</span></a>

Jumentum in, premo pertineo valde mara velit haero ulciscor abigo commodo vulputate volutpat. In typicus luptatum, nutus, ne letalis vel ventosus. Hendrerit aliquam eros eum eu laoreet, minim, probo. Duis nibh in huic abico duis enim oppeto. Link yang dipasangIni adalah isi dari tooltips yang sudah kamu buat tadi

Related Post :