Simple Tooltip dengan jQuery
0 views
Sudah banyak tutorial tentang cara membuat tooltip ini, baik dengan javascript, atau pun dengan kehebatan CSS3, bahkan bisa membuat tooltip dengan menggunakan pseudo elements.
Saat ini saya akan menjelaskan bagaimana cara membuat Simple Tooltip dengan menggunakan jQuery. Tooltip ini bisa diterapkan pada berbagai tag, seperti link, p, img dsb.
DEMO
Contoh tooltip pada link :Blog Kang Ismet
Contoh tooltip pada tag 'p':
Simpan Mouse di sini, ini adalah contoh tooltip pada tag 'p'
Contoh tooltip pada image :
Beberapa langkah mudah untuk menerapkan Simple Tooltip ini yaitu :
1. Pastikan template sobat sudah tersimpan jQuery. Kalau belum lihat DISINI
2. Tambahkan sript ini di atas
</body><script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
</script>3. Untuk mempercantik tampilan, simpan kode ini di atas (silahkan edit yang diperlukan)
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}Cara Penggunaan Simple Tooltip
Untuk menggunakan simple tooltip ini, sobat tinggal menambahkan class 'masterTooltip' dan tag 'title'. Di bawah ini merupakan beberapa contoh penggunaan Tooltip pada beberapa tag.
<a class="masterTooltip" href="http://blog.kangismet.net" title="Blogger Tutorial">Blog Kang Ismet</a>
<p class="masterTooltip" title="Ini adalah contoh tooltip pada tag p">Contoh tooltip pada tag p</p>
<img class="masterTooltip" title="Tooltip on image" src="image.png"/>Semoga bermanfaat...
Resource: http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/
87 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
jadinya semua kodenya berwarna merah.. dan tooltip kang ismet jadi tidak bisa terpasang x__x
apakah ada hubungannya? kalau ada bagaimana cara mengatasinya? trims
Cara masang (".tooltip"..... sampai "}") di mana kanga?
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><div class='postthumb'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>",'<data:post.title/>'));
</script></div></a>
<b:else/>
<b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='120' width='160'/></div></a>
<b:else/>
<a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:title='data:post.t…
Dilanjuut.
kalo cara di atas buat wordpress gmana kang ? kan ga ada <data:type"e bla bla bla bla gituh...mohon pencerahannya ...
$(document).ready(function() {
});
Soalnya banyak ngaruhnya~~~~
[img]https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/1045053_471350296289885_1809260651_n.jpg[/img]
cara supaya tidak error lagi gimana ya kang?
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>
salah wae kang abdi masangna.
Punten ah, nembe kadieu deui nyungken hapuntenna bade mayunan sasih shaum. :)
untuk tooltip, yang kode awal :
<a expr:href='data:post.url'>
tambahkan title, jadi :
<a expr:href='data:post.url' expr:title='data:post.title'>
tambahkan tooltip :
<a class='masterTooltip' expr:href='data:post.url' expr:title='data:post.title'>
rel="noindex"
gak ya?
semakin keren saja nie kang bisa saya coba nie kang :)
http://www.mediafire.com/download/cqj44ari828lcwo/otomatis-crack.rar
tinggal paste ke file penyimpanan restart langsung fullversion untuk trial PS5 nya download ke resminya aja adobe.com
Maaf nanya nubie muluan @@,
mohon share ya ? :)
but nice info banget dee.... :-d
nyuungkeun penilai.an nya kang kangge blog abdi http://rian-nurherdian.blogspot.com , punten ah seu'eur resource ti blog kang ismet :D hhe