Diskusi Terbaru! ×

Cara Memasang Tooltip Responsive di Blog dengan jQuery.

Cara Memasang Tooltip Responsive di Blog dengan jQuery. Haloo.. udah pada bangun sob?, setelah beberapa hari kemarin ane share template Pertamax - Free Responsive Blogger Template nah pagi ini saya mau share Cara Bikin Tooltip Responsive yang ane pasang di Template tersebut.

kaya-nya bagai sayur tanpa garam kalo tutorial tanpa demo, baik lah untuk demo-nya silahkan coba sobat sentuh2 link, gambar, dan paragraph di bawah ini :


Tooltip pada Paragraph atau tag <p> :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.



Tooltip pada Gambar atau pada tag <img> :




Tooltip pada Link atau pada tag anchor text <a> :

Kang Rian [on Blogger!] - Tutorial Blogger & Tips Trik Blogging!

Cara Pemasangan :


Langkah-1 : Pastikan sobat sudah memasang jQuery Library, versi berapapun itu. jika belum silahkan simpan script external dibawah ini tepat sebelum code </head> pada halaman Edit Template :
<!-- Library jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Catatan : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.

Langkah-2 : Simpan kode CSS di bawah ini tepat di atas tag </head> :
#tooltip {
  text-align: center;
  color: #fff;
  background: #111;
  position: absolute;
  z-index: 100;
  padding: 15px;
  border-radius: 3px;
}

#tooltip:after /* triangle decoration */ {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

#tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 10px solid #111;
  top: -20px;
  bottom: auto;
}

#tooltip.left:after {
  left: 10px;
  margin: 0;
}

#tooltip.right:after {
  right: 10px;
  left: auto;
  margin: 0;
}
Catatan : Silahkan desain secantik mungkin kode CSS Responsive Tooltip di atas.

Langkah 3 - Simpan kode JavaScript di bawah ini, tepat di atas tag </body> :
<script>
//<![CDATA[
// Pengaturan Tooltip akan otomatis di pasang pada tag tertentu ( Setting di Bawah ini ) :
    $("a").addClass("tooltip");
    $("img").addClass("tooltip");
    $("p").addClass("tooltip");

// Responsive Tooltip Minify JS
$(function(){var targets=$("[class~=tooltip]"),target=false,tooltip=false,title=false;targets.bind("mouseenter",function(){target=$(this);tip=target.attr("title");tooltip=$('<div id="tooltip"></div>');if(!tip||tip==""){return false}target.removeAttr("title");tooltip.css("opacity",0).html(tip).appendTo("body");var init_tooltip=function(){if($(window).width()<tooltip.outerWidth()*1.5){tooltip.css("max-width",$(window).width()/2)}else{tooltip.css("max-width",340)}var pos_left=target.offset().left+(target.outerWidth()/2)-(tooltip.outerWidth()/2),pos_top=target.offset().top-tooltip.outerHeight()-20;if(pos_left<0){pos_left=target.offset().left+target.outerWidth()/2-20;tooltip.addClass("left")}else{tooltip.removeClass("left")}if(pos_left+tooltip.outerWidth()>$(window).width()){pos_left=target.offset().left-tooltip.outerWidth()+target.outerWidth()/2+20;tooltip.addClass("right")}else{tooltip.removeClass("right")}if(pos_top<0){var pos_top=target.offset().top+target.outerHeight();tooltip.addClass("top")}else{tooltip.removeClass("top")}tooltip.css({left:pos_left,top:pos_top}).animate({top:"+=10",opacity:1},50)};init_tooltip();$(window).resize(init_tooltip);var remove_tooltip=function(){tooltip.animate({top:"-=10",opacity:0},50,function(){$(this).remove()});target.attr("title",tip)};target.bind("mouseleave",remove_tooltip);tooltip.bind("click",remove_tooltip)})});
//]]>
</script>

Cara Pemasangan ke HTML?

Dikarenakan Responsive Tooltip ini menggunakan jQuery Library, maka saya menambahkan fungsi ".addClass" pada ke 3 tag html yaitu "P" , "IMG" , dan "A" ( Paragraph, Image, dan Anchor Text ).

Jadi sobat gak perlu bingung cara pakai plugin responsive tooltip ini, sobat hanya cukup menggunakan property title="Judul" seperti biasa-nya. dan Plugin Responsive Tooltip ini akan muncul dengan sendirinya.

Sekian postingan saya kali ini, tentang Bagaimana Cara Memasang Tooltip Responsive dengan jQuery dan CSS di Blog?, jika ada pertanyaan, silahkan diskusikan melalui kotak komentar dibawah ini, terima kasih.

Salam Blogger,
- A.K.A ` KangRian! -

http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

56 komentar:

Adhy Suryadi mengatakan...

Nah sepertinya yang ini yang cocok kang karena ga usah merubah semua html nya atau membuat html baru yang harus menambahkan class secara manual pada link atau lainnya agar keluar tooltip-nya...
Perlu dicoba nih kang :)

Rian Nurherdian mengatakan...

silahkan kang adhy, sebetulnya saya hanya memanfaatkan fitur jQuery yang ada.. biar gak terlalu repot ..

Cindy Nailla mengatakan...

oalah tooltip toh itu namanya :D

Anonim mengatakan...

KEDUAX di amankan :cool

Si Ryan mengatakan...

mantap kang tooltipnya :thumbup tapi saya simpen dulu deh :D, soalnya tampilan blog saya terlalu sederhana, kurang cocok untuk make tooltip :D

Anonim mengatakan...

haduh kebagian ketiga :berduka

Anonim mengatakan...

tapi ane udh ada tooltipnya soalnya pke template PERTAMAX :2thumbup

Rian Nurherdian mengatakan...

hehe, iya itu nama-nya tooltip :D

Dian AnaR-chyta mengatakan...

Gak ribet ya kang kalau dengan menambahkan add class..
Tinggal pasang dan udah jadi :D

Rian Nurherdian mengatakan...

Tetap Semangat sob! :iloveindonesia

Rian Nurherdian mengatakan...

woke mas ryan, sesama rian pasti saling mengerti. :D hehe

@khoazis : :2thumbup

Rian Nurherdian mengatakan...

iya mba, tepat seperti moto-nya jquery "talk less do more!" :D

Leony Li mengatakan...

hehe ada yang baru nih.

Anonim mengatakan...

wah yang ini saya cari cari gan tooltip yang responsive. makasih ya kang. mau coba dlu hehe :2thumbup

Rian Nurherdian mengatakan...

iya mba. :)

Rian Nurherdian mengatakan...

silahkan di coba2 aja dulu gan. :)

Faizal Indra kusuma mengatakan...

salam kenal mas....
mas kebetulan saya sedang membuat online shop. mau coba menggunakan Blogger dulu (Modal minus). bisa bantu ngga mas bagaimana biar blog saya bisa lebih simple lagi. Tampilan template'nya ngga kaya pada umumnya blogger. saya buat jadi satu tampilan. tapi saya bingung pada saat ingin melihat deskripsi barang'nya harus nyambung ke blog lain (Buat blog baru) biar bisa terintegrasi atau istilahnya ngelink. Waktu saya buat blog homepage'nya saya cari templates kosong. coba mas check blog saya ini: http://bngbhgf43.blogspot.com/ dan http://fdarrsdf.blogspot.com/. Blog saya belum dipublikasikan. saya masih ngulikin code-codenya... Barang kali bisa bantu, biar bisa coding di satu blog tanpa harus buat blog baru buat deskripsi barangnya... mas pasti ngerti kooo....

Tolong dibantu yaaaa
jawabannya ditunggu mas, kontak saya faizalinka@gmail.com. makasih mas :)

Umar A. M. F mengatakan...

lapor!!! umarazmar.blogspot.com telah menerapkan tutorial ini,.. laporan selesai!!! :cool

ma acih kang.... :shakehand

Rian Nurherdian mengatakan...

wkwkwk.. :ngakak saya kira ada apa! siap, laporan diterima.. rapihkan berkas, waktunya cuti.. :D

Rian Nurherdian mengatakan...

waduh :bingung, soalnya saya gak tau mas ngoding dari awal nya.. kalo dari segi tampilan menurut saya itu udah bagus kok mas, profesional ..

Beben Koben mengatakan...

saya koben, bloglang ganteng kalem :kiss

Beben Koben mengatakan...

yeuh tooltip yeuh...
www.antsmagazine.com/web-development/25-examples-of-css3-and-html5-tool-tip-tutorials/

Rian Nurherdian mengatakan...

alim ah, diriku mah sudah terlanjut jatuh cinta sama si yang nama-nya jQuery ! :P

Rian Nurherdian mengatakan...

alah siah, setelah 3000 tahun kita kenal dalam dunia blogging, saya baru menyadari kalo kang beben itu ganteng kalem. :sorry maaf.

Aldhinya Aldhi mengatakan...

Langsung Di Coba Gan ...

Anonim mengatakan...

siap kang :iloveindonesia

AGUS MAKMUN mengatakan...

wah ini bang yang ane cari2...
amankan Aspal dulu ah.. :v

Beben Koben mengatakan...

urang mah k cindy naila selud!!! manehna kan nanya eta tooltip, tah urg ngenalkeun diri?
jeng naon ente apal urg ganteng kalem???

Beben Koben mengatakan...

kaduhung di bere...moal2 deui ah :D

Rian Nurherdian mengatakan...

suka pundungan ah aa beben mah .. :(

Rian Nurherdian mengatakan...

silahkan gan! :sup2 :sup2

Rian Nurherdian mengatakan...

siap kang agus! :shakehand

Gunawan Eka Saputra mengatakan...

Saya belum pernah pasang tooltip Kang, jadi pngen coba nch kayaknya mudah...

Nenk Ratu mengatakan...

dicoba tap ga berhasil kang... kumaha ieu tos kieu.. :malu

Welda Aprilia mengatakan...

Kang mau tanya, kenapa ya kalo saya pasang tooltip ini, menu dropdown saya jadi ga berfungsi. Kalo kaya gitu kenapa ya kang? Terimakasih sebelumnya.

Rian Nurherdian mengatakan...

boleh lihat blog nya?

Rama Banten RB mengatakan...

berhasil terimakasih kang

Taufan Fatahillah Haigal Maulana mengatakan...

kok gak bisa kang? b4sharing.blogspot.com

ade prasetio mengatakan...

saya coba ...

Anonim mengatakan...

mantab banget kang tooltipnya :D simple banget dan ngga ribet kang :D thank kang :kiss

Ridwan Aditya mengatakan...

Kang kalo bikin tooltip yg memanggil keterangan dan gambar ada tutorialnya kang?

Ace Maxs31 mengatakan...

mantap dah artikelnya
http://acemaxs31.com/obat-herbal-gagal-jantung/

Liya Alicia mengatakan...

sangat menarik artikelnya,, ijin share gan
http://apotekacemaxs.com/pengobatan-alami-paru-paru-basah/

Liya Alicia mengatakan...

keren artikelnya gan
http://apotekacemaxs.com/pengobatan-tradisional-batu-ginjal/

Liya Alicia mengatakan...

mantab artikelnya sob
http://ramuantradisionalkita.com/

Ratna sari mengatakan...

nice artikelnya :)
http://jellygamatgoldg31.com

Liya Alicia mengatakan...

terimakasih atas infonya gan
http://apotekacemaxs.com/

Grosir Obat Jelly Gamat Gold G mengatakan...

Thank Gan Artikelnya, sangat membantu

http://grosirobatjellygmat.com/
http://obatjellygamatgoldg.net/
http://jellygamat-gold.net/
http://jamutradisionalmujarab.com/
http://jellygamatgoldgpro.com/

jumawan effendi mengatakan...

maaf mas, jika itu di terapkan di wordpress bisa tidak ya?

kedai acemaxs mengatakan...

Thanks gan infonya, ditunggu info lainnya :)
http://kedaiacemaxs.com/obat-tradisional-untuk-radang-usus-besar/

Apotek Herbal ACE MAXS mengatakan...

makasih banyak buat infonya,, nice post

http://goo.gl/3QkpC3

Palma Bernardo Alexius Hutabarat mengatakan...

sejenis makanan ringat yah tooltip nya :ngacir

Pusaka Madinah mengatakan...

Kang, di blog sy kok tooltipnya kok kadang gamau ilang pas udah gak di-mouse over..kenapa ya?

Kang Rian mengatakan...

biasanya karena jquery confilct kang :)

Buddy Satria mengatakan...

Malam kang! Pertama trims atas tipsnya dan sukses. Kedua, aku coba simpan css & js nya di eksternal kok gak bisa ya? alias tooltips-nya gak muncul.

Ace Maxs31 mengatakan...

nuhun kang rian sudah memberikan tispnya
acemaxs31.com