Cara Membuat Tooltip Responsive

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>

Terima Kasih telah membaca artikel tentang Cara Membuat Tooltip Responsive . Silahkan baca artikel lainnya di daftar isi.

• Tweet
• Share
• Share
• Share
• Share

Unknown

Judul : Cara Membuat Tooltip Responsive .
Ditulis oleh : Unknown .
Pada hari : Monday, 11 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+

×

Related Post

• Cara Membuat Show-Hide Komentar Blog Cara Membuat Show-Hide Komentar Blog. Berikut ini Tutorial Bangsat tentang Cara Membuat komen
• Cara Membuat Menu Navigasi blog Melayang Tutorial Bangsat - Pada Kesempatan kali ini Tutorial Bangsat akan berbag
• Cara Verification Alexa Rank diBlog TerbaruCara Verification Alexa Rank diBlog Terbaru. Hai sobat Tutorial Bangsat kali ini tentang Cara
• Cara Membuat Halaman Error 404 di Blog ala Kang RianCara Membuat Halaman Error 404 di Blog ala Kang Rian - 404 Adalah Kode Halaman Error