Home / BLOGGER / CSS / jQuery / Responsive / Tooltip / Cara Memasang Tooltip Responsive di Blog dengan jQuery.

Cara Download Cara Memasang Tooltip Responsive di Blog dengan jQuery. Update Terbaru

Sedikit Info Seputar Cara Memasang Tooltip Responsive di Blog dengan jQuery. Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Memasang Tooltip Responsive di Blog dengan jQuery., kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel BLOGGER, Artikel CSS, Artikel jQuery, Artikel Responsive, Artikel Tooltip, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara Memasang Tooltip Responsive di Blog dengan jQuery. Terbaru
link: Cara Memasang Tooltip Responsive di Blog dengan jQuery.

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Cara Memasang Tooltip Responsive di Blog dengan jQuery. Terbaru dan Terlengkap 2017

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

Itulah sedikit Artikel Cara Memasang Tooltip Responsive di Blog dengan jQuery. terbaru dari kami

Semoga artikel Cara Memasang Tooltip Responsive di Blog dengan jQuery. yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Memasang Tooltip Responsive di Blog dengan jQuery.

Share this