Cara Memasang Tooltip Responsive di Blog dengan jQuery. - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 6/24/2014 09:37:00 AM Cara Memasang Tooltip Responsive di Blog dengan jQuery. Cara Memasang Tooltip Responsive di Blog dengan jQuery.

Cara Memasang Tooltip Responsive di Blog dengan jQuery.

Oleh. Kang Rian  •  55  •      Edit
Cara Memasang Tooltip Responsive di Blog dengan jQuery.
Cara Memasang Tooltip Responsive di Blog dengan jQuery.
Sent Pin it!
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
Sent Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

         

55 komentar

  1. Adhy Suryadi6/24/2014 9:52 AM

    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 :)

    BalasHapus
    Balasan
    1. Rian Nurherdian6/24/2014 9:54 AM

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

      Hapus
  2. Cindy Nailla6/24/2014 10:25 AM

    oalah tooltip toh itu namanya :D

    BalasHapus
    Balasan
    1. Rian Nurherdian6/24/2014 10:32 AM

      hehe, iya itu nama-nya tooltip :D

      Hapus
    2. Beben Koben6/24/2014 6:35 PM

      saya koben, bloglang ganteng kalem :kiss

      Hapus
    3. Rian Nurherdian6/24/2014 6:46 PM

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

      Hapus
    4. Beben Koben6/24/2014 10:08 PM

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

      Hapus
    5. Gunawan Eka Saputra6/30/2014 2:58 PM

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

      Hapus
    6. Palma Bernardo Alexius Hutabarat5/21/2015 7:25 PM

      sejenis makanan ringat yah tooltip nya :ngacir

      Hapus
  3. Anonim6/24/2014 10:26 AM

    KEDUAX di amankan :cool

    BalasHapus
    Balasan
    1. Anonim6/24/2014 10:27 AM

      haduh kebagian ketiga :berduka

      Hapus
    2. Rian Nurherdian6/24/2014 10:33 AM

      Tetap Semangat sob! :iloveindonesia

      Hapus
    3. Anonim6/24/2014 9:48 PM

      siap kang :iloveindonesia

      Hapus
  4. Si Ryan6/24/2014 10:27 AM

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

    BalasHapus
    Balasan
    1. Anonim6/24/2014 10:29 AM

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

      Hapus
    2. Rian Nurherdian6/24/2014 10:34 AM

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

      @khoazis : :2thumbup

      Hapus
  5. Dian AnaR-chyta6/24/2014 10:32 AM

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

    BalasHapus
    Balasan
    1. Rian Nurherdian6/24/2014 10:35 AM

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

      Hapus
  6. Leony Li6/24/2014 10:36 AM

    hehe ada yang baru nih.

    BalasHapus
  7. Anonim6/24/2014 11:43 AM

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

    BalasHapus
  8. Umar A. M. F6/24/2014 4:21 PM

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

    ma acih kang.... :shakehand

    BalasHapus
    Balasan
    1. Rian Nurherdian6/24/2014 5:15 PM

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

      Hapus
  9. Rian Nurherdian6/24/2014 5:26 PM

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

    BalasHapus
  10. Beben Koben6/24/2014 6:35 PM

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

    BalasHapus
    Balasan
    1. Rian Nurherdian6/24/2014 6:45 PM

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

      Hapus
    2. Beben Koben6/25/2014 2:01 AM

      kaduhung di bere...moal2 deui ah :D

      Hapus
    3. Rian Nurherdian6/25/2014 9:13 AM

      suka pundungan ah aa beben mah .. :(

      Hapus
  11. Aldhinya Aldhi6/24/2014 8:53 PM

    Langsung Di Coba Gan ...

    BalasHapus
  12. AGUS MAKMUN6/24/2014 10:01 PM

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

    BalasHapus
  13. Nenk Ratu9/15/2014 11:49 PM

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

    BalasHapus
  14. Welda Aprilia9/28/2014 3:01 PM

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

    BalasHapus
  15. Rama Banten RB10/06/2014 11:12 PM

    berhasil terimakasih kang

    BalasHapus
  16. Taufan Fatahillah Haigal Maulana10/24/2014 11:33 PM

    kok gak bisa kang? b4sharing.blogspot.com

    BalasHapus
  17. ade prasetio11/23/2014 11:33 PM

    saya coba ...

    BalasHapus
  18. Anonim12/11/2014 10:06 PM

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

    BalasHapus
  19. Ridwan Aditya12/23/2014 9:30 PM

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

    BalasHapus
  20. Ace Maxs312/07/2015 3:18 PM

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

    BalasHapus
  21. Liya Alicia2/13/2015 2:11 PM

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

    BalasHapus
  22. Liya Alicia2/18/2015 2:03 PM

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

    BalasHapus
  23. Liya Alicia2/20/2015 11:40 AM

    mantab artikelnya sob
    http://ramuantradisionalkita.com/

    BalasHapus
  24. Ratna sari2/21/2015 9:50 AM

    nice artikelnya :)
    http://jellygamatgoldg31.com

    BalasHapus
  25. Liya Alicia2/26/2015 10:20 AM

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

    BalasHapus
  26. Grosir Obat Jelly Gamat Gold G2/26/2015 10:57 AM

    Thank Gan Artikelnya, sangat membantu

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

    BalasHapus
  27. jumawan effendi3/01/2015 9:57 AM

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

    BalasHapus
  28. kedai acemaxs3/02/2015 9:20 AM

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

    BalasHapus
  29. Apotek Herbal ACE MAXS3/31/2015 10:24 AM

    makasih banyak buat infonya,, nice post

    http://goo.gl/3QkpC3

    BalasHapus
  30. Pusaka Madinah6/12/2015 9:02 AM

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

    BalasHapus
    Balasan
    1. Kang Rian6/13/2015 9:35 AM

      biasanya karena jquery confilct kang :)

      Hapus
  31. Buddy Satria11/25/2015 12:49 AM

    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.

    BalasHapus
  32. Ace Maxs3112/10/2015 10:27 AM

    nuhun kang rian sudah memberikan tispnya
    acemaxs31.com

    BalasHapus
Utama Blogger CSS jQuery Responsive Tooltip Cara Memasang Tooltip Responsive di Blog dengan jQuery.

Terpopular! Minggu ini..

×

Konversi Bersihkan