Cara membuat tooltip responsive

Hallo bro selamat malam, kali udah pada tidur belom yak?? ., haha kali ini saya ngeshare cara ngebuat tooltip responsive pada blogger agar template atau blogger kamu menjadi lebih menarik.
nah berikut macam-macam tooltip yang bsa digunakan.

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

coba arahkan cursor ke gambar ,. .!
selain gambar biasa tooltip digunakan di anchor text yang sudah saya bahas sebelumnya diblog ini .
nah. 

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.

SHARE THIS