Tooltip Kustom Otomatis untuk Semua Tautan
<script>
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {
var a = document.getElementsByTagName('a');
var t = document.createElement('span');
t.id = "tt";
t.style.position = "absolute";
t.style.zIndex = 999;
t.style.backgroundColor = "#FFE13F";
t.style.border = "1px solid #BC5F05";
t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
t.style.padding = "5px 10px";
t.style.color = "#000";
t.style.maxWidth = "170px";
t.style.wordWrap = "break-word";
t.style.display = "none";
document.body.appendChild(t);
var tooltip = document.getElementById('tt');
function over(e) {
tooltip.style.display = "block";
tooltip.innerHTML = this.title;
tooltip.style.top = (e.pageY + 25) + 'px';
tooltip.style.left = e.pageX + 'px';
this.setAttribute('original', this.title);
this.title = "";
}
function out() {
tooltip.innerHTML = "";
tooltip.style.display = "none";
this.title = this.getAttribute('original');
this.removeAttribute('original');
}
for (var i = 0; i < a.length; i++) {
if (a[i].title) {
a[i].onmouseover = over;
a[i].onmouseout = out;
}
}
})();
//]]>
</script>
Salin kodenya dan letakkan di atas tag </body>
Demo
Labels: Blogger, JavaScript, Potongan
30 Comments:
keren :3
Begitu liat postingan ini.. refleks ane bedoa moga Allah muliakan dunia-akhiratmu, MasBro.. aammiiin. :-bd 0:)
Ada suka ada duka :\
apa bedanya sama tooltip yang sebelum2nya mas??
Bedanya, yang ini sangat ringan karena tidak memerlukan library seperti JQuery atau MooTools. Intinya sih, ini cuma sebagai alternatif untuk pemilik website yang tidak dilengkapi dengan JQuery (sebagai contoh). Kelemahanya memang, hasilnya tidak sesempurna tooltip yang berada di bawah JavaScript Library.
Terkait: MyTooltip JQuery Plugin
gapapa, Mas.. emang tabiat alam dunia 'kan gitu: tempat bertukarnya senang-susah;suka-duka;siang-malam, insyaAllah hamba Allah tetap dapat Raahiim-Nya. :)
btw, ane sebelumnya udah pake yang mytooltip.. tar coba dikolaborasi dikit ah.. :) makasih Mas Taufik, moga ibadah ramadhannya lancar yahh.. :D
Amiin...
kami sangat menyukai blog ini, krn adminnya professional, menguasai materi dan sangat dermawan dlm sharing ilmu. bahasannya jg lengkap dan inspiratif.
salam kenal dan salam hormat dari kami.
Amiiinnn... ^o^
Nggak perlu dikolaborasi. Tooltip versi library lebih mantafff dibandingkan yang ini. Ini cuma sebagai dasar dari konsep nested tooltip replacement yang praktis saja. Kalau dikolaborasi malah jadi berantakan. Bisa dibayangkan, Spongebob Squarepants berkolaborasi dengan Sandy Sandoro.
WEW!
Salam kenal juga =D
kalau ditambahin border-radius caranya gmn?
udah bisa..
terus kalau dikasih transition? :D
Agak panjang kalau dijelaskan, tapi pada intinya di sini Saya ganti properti display:none ke display:block menjadi visibility:hidden;opacity:0 ke visibility:visible;opacity:1:
function over(e) {
tooltip.style.visibility = "visible";
tooltip.style.opacity = 1;
tooltip.innerHTML = this.title;
tooltip.style.top = (e.pageY + 25) + 'px';
tooltip.style.left = e.pageX + 'px';
this.setAttribute('original', this.title);
this.title = "";
}
function out() {
tooltip.innerHTML = "";
tooltip.style.visibility = "hidden";
tooltip.style.opacity = 0;
this.title = this.getAttribute('original');
this.removeAttribute('original');
}
lalu set CSS transisi di CSS:
#tt {
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-ms-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
Demo: http://jsfiddle.net/tovic/TUSns/5/
artikelnya keren2, termasuk yg ini, izin menimba ilmu di sini y kk :yaya:
wow keren...sebenarnya aku mau ngasih job kepada ADMIN..nanti aku bayar pakai $$...kalau berkenan mohon e-mail ke filmmediafire@gmail.com..
aku tunggu ya..
Duh... duh... duh....
Emailnya nggak bisa dibuka. Job blogspot?
Nanti Saya hubungi kalau sudah bisa dibuka. Yahoo! sedang susah diakses. Tanggal tua, makannya Saya pasangi hibernasi di formulir komentar :'(
Mas broo' pas aku lg surfing di google gak sengaja nemuin blog yang temanya 99.9% sama persis dengan blog ini, apa benar itu blog'nya mas broo? ini alamatnya "blog[dot]pustakaflash[dot]com"
mas sorry, ikutan kontes seo sapa tau menang, liat ulasannya http://www.zondim.com/2012/08/pegipegicom-booking-hotel-murah-mudah.html
kalo link tidak mengunakan title title="" apak muncul tooltip-nya mas ?
Tidak bisa. Tooltip diambil dari atribut title
saya mau pasang border-radius, kok gak bs ya mas ? mohon bantuannya dong :)
#tt {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
mas di blog saya title postingan kog gk ada gimana solusinya tolong
<h3 class='post-title entry-title' expr:title='data:post.title'>
wiiiih... hebat mas... keren.. mantap \o/
sekedar masukan -->
tampilan dan sistem blog ini saya rasa masih keren yg ini :
urang-kurai.blogspot.com
mas mimin tolong dong bkin tutorial yg halaman search ny sperti blog itu ??
trimakasih ^_^
wew keren, mantab. master tambah mantab!
- Blogwalking Yuk! -
Kalo yang span fungsinya buat apa mas?
Itu pake jquery berapa mas? :)
Maaf nih saya nyoba pake halaman html sendiri pake jquery-1.8.3.min.js , tapi kok gagal yah? apanya ya mas? :)
Tapi pas di terapin di blogger ko ada ya? :) Kenapa di html saya ga ada 7:(
seep dpt juga yang simple, thanks lagi mastaufik \o/ .
cungkrink96
Post a Comment
<< Home