Home > Menengah > Web Desain > Tutorial JQuery > Membuat ToolTip dengan JQuery

.

Tidak ada komentar BYAdmin Ilmuwebsite

Apa itu tooltip? Mengapa tooltip diperlukan? Bagaimana membuat tooltip? Di mana rumahnya tooltip? Penulis akan jelaskan semuanya tapi tidak termasuk pertanyaan yang terakhir, karena ini merupakan pertanyaan yang tidak akan penulis jelaskan jawabannya. Tooltip sendiri dibuat biasanya menggunakan javascript, dan sekarang penulis akan menjelaskannya dengan menggunakan jquery.

Okeh… :D… (Maaf, terkadang memang penulis sedikit telat dalam ketawa) Sebelum masuk ke dalam penjelasan, silahkan terlebih dahulu lihat demonya di sini http://www.ilmuwebsite.com/file_tutorial/jquery2/tooltip.html Bagaimana ?? Begitulah tooltip.

Mari kita siapkan terlebih dahulu sebuah file html, penulis berikan namanya tooltip.html, di bagian bodynya di isi seperti ini …

<div id=”container”>
<a href=”#”><strong>3</strong>
<div><p>Ada apa dibalik tahun 3 Maret 1924? Kehancuran Persatuan, yang menimbulkan bencana dahsyat sepanjang sejarah manusia.</p>
</div></a>
<a href=”#”><strong>Maret</strong>
<div><p>Sebuah institusi yang mempersatukan manusia dari berbagai ras, institusi yang mempersatukan manusia dari berbagai agama, dipecah-pecah oleh para perusak yang rakus harta</p>
</div></a>
<a href=”#”><strong>1924</strong>
<div><p>Namun akan kembali lagi dalam waktu dekat, institusi yang berisi orang-orang yang ikhlas, yang menghormati agama yang lain, yang menjaga hak rakyatnya, yang memakmurkan rakyatnya dan tidak membedakan agama , yang mempersatukan semua ras di dunia, sebuah sistem, <strong>Al-Khilafah Al Islamiyah</strong></p>
</div></a>
</div>

kemudian di bagian headnya tambahkan style seperti ini? :

<style type=”text/css”>
body{
margin-top:50px;
}
.tooltip{
border:1px solid #dfdfdf;
background-color: #111;
width:300px;
height:auto;
padding:10px 10px 20px 10px;
display:none;
position:absolute;
-moz-border-radius:9px;
font-size:12px;
color: #fff;
}
a.link{
font-weight:normal;
width:autopx;
height:autopx;
padding:25px 20px 20px 20px;
border:3px solid #111;
text-decoration:none;
color: #fff;
background-color: #ff8000;
font-family: arial;
margin-left:20px;
-moz-border-radius:9px;
}
a.link strong{
font-size:30px;
}
a.link div.tooltip strong{
font-size:11px;
}
</style>

kemudian yang terakhir letakan dibagian headnya yaitu jquery library, dan script untuk membuat tooltip …

<script type=”text/javascript” src=”jquery-1.4.js”></script>
<script type=”text/javascript”>
$(function(){
$(“#container a” ).hover(function(){
$(this).children(“#container a.link div.tooltip” ).fadeIn();
}, function(e){
$(this).children(“#container a.link div.tooltip” ).hide();
});
$(“#container a” ).mousemove(function(e){
$(this).children(“#container a.link div.tooltip” ).css(‘top’, e.pageY+15).css(‘left’, e.pageX+15);
});
});
</script>

Inti yang terjadi adalah, ketika linknya di sorot
$(“#container a” ).hover(function(){

tampilkan anak dari linknya
$(this).children(“#container a.link div.tooltip” ).fadeIn();

dan jika mousenya pindah-pindah, maka gerakan anak dari linknya
$(“#container a” ).mousemove(function(e){
$(this).children(“#container a.link div.tooltip” ).css(‘top’, e.pageY+15).css(‘left’, e.pageX+15);

Selesai sudah. Silahkan scriptnya di download disini http://www.ilmuwebsite.com/file_tutorial/jquery2/jquery-tooltip-ilmuwebsite.com.zip

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



No Responses

eXTReMe Tracker