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
By Surga Kenari, at Sunday, July 29, 2012 at 2:38:00 PM GMT+7
Begitu liat postingan ini.. refleks ane bedoa moga Allah muliakan dunia-akhiratmu, MasBro.. aammiiin. :-bd 0:)
By MUX SPARROW, at Sunday, July 29, 2012 at 4:04:00 PM GMT+7
Ada suka ada duka :\
By Taufik Nurrohman, at Sunday, July 29, 2012 at 4:43:00 PM GMT+7
apa bedanya sama tooltip yang sebelum2nya mas??
By Anonymous, at Sunday, July 29, 2012 at 10:25:00 PM GMT+7
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
By Taufik Nurrohman, at Monday, July 30, 2012 at 12:14:00 PM GMT+7
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
By MUX SPARROW, at Monday, July 30, 2012 at 9:33:00 PM GMT+7
Amiin...
By marco, at Monday, July 30, 2012 at 10:46:00 PM GMT+7
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.
By marco, at Monday, July 30, 2012 at 10:51:00 PM GMT+7
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.
By Taufik Nurrohman, at Monday, July 30, 2012 at 11:42:00 PM GMT+7
WEW!
Salam kenal juga =D
By Taufik Nurrohman, at Monday, July 30, 2012 at 11:45:00 PM GMT+7
kalau ditambahin border-radius caranya gmn?
By Putra, at Tuesday, July 31, 2012 at 7:28:00 PM GMT+7
udah bisa..
terus kalau dikasih transition? :D
By Putra, at Tuesday, July 31, 2012 at 8:02:00 PM GMT+7
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/
By Taufik Nurrohman, at Wednesday, August 1, 2012 at 6:40:00 AM GMT+7
artikelnya keren2, termasuk yg ini, izin menimba ilmu di sini y kk :yaya:
By aephobia, at Friday, August 3, 2012 at 12:14:00 AM GMT+7
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..
By Anonymous, at Saturday, August 4, 2012 at 4:02:00 PM GMT+7
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 :'(
By Taufik Nurrohman, at Saturday, August 4, 2012 at 9:23:00 PM GMT+7
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"
By Gawaisme, at Thursday, August 9, 2012 at 4:55:00 PM GMT+7
mas sorry, ikutan kontes seo sapa tau menang, liat ulasannya http://www.zondim.com/2012/08/pegipegicom-booking-hotel-murah-mudah.html
By debbie irlando manurung, at Friday, August 10, 2012 at 5:03:00 AM GMT+7
kalo link tidak mengunakan title title="" apak muncul tooltip-nya mas ?
By Mrbej0, at Sunday, May 26, 2013 at 6:00:00 PM GMT+7
Tidak bisa. Tooltip diambil dari atribut title
By Taufik Nurrohman, at Sunday, May 26, 2013 at 8:58:00 PM GMT+7
saya mau pasang border-radius, kok gak bs ya mas ? mohon bantuannya dong :)
By Admin - TheBerita, at Friday, June 28, 2013 at 8:54:00 PM GMT+7
#tt {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
By Taufik Nurrohman, at Sunday, June 30, 2013 at 9:49:00 AM GMT+7
mas di blog saya title postingan kog gk ada gimana solusinya tolong
By Wiro Sableng, at Monday, July 1, 2013 at 2:15:00 AM GMT+7
<h3 class='post-title entry-title' expr:title='data:post.title'>
By Taufik Nurrohman, at Tuesday, July 2, 2013 at 4:30:00 PM GMT+7
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 ^_^
By Anonymous, at Wednesday, August 14, 2013 at 1:06:00 AM GMT+7
wew keren, mantab. master tambah mantab!
- Blogwalking Yuk! -
By Anonymous, at Thursday, October 3, 2013 at 8:03:00 AM GMT+7
Kalo yang span fungsinya buat apa mas?
By Wildan MR, at Tuesday, December 10, 2013 at 7:18:00 PM GMT+7
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? :)
By Wildan MR, at Tuesday, December 10, 2013 at 7:35:00 PM GMT+7
Tapi pas di terapin di blogger ko ada ya? :) Kenapa di html saya ga ada 7:(
By Wildan MR, at Tuesday, December 10, 2013 at 7:39:00 PM GMT+7
seep dpt juga yang simple, thanks lagi mastaufik \o/ .
cungkrink96
By Unknown, at Wednesday, March 4, 2015 at 10:24:00 PM GMT+7
Post a Comment
<< Home