How to install responsive tooltip on a blog with jQuery by Kompiajaib.com

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

To all bloggers who I respect , today I will redistribute a tutorial about Tooltip made ​​by a senior Indonesian Blogger . Mas Adhy Suryadi with his well-known blog www.kompiajaib.com.

Before getting into the installation process about How to install responsive tooltip on a blog with jQuery by Kompiajaib.com , it 's good we know in advance what is the meaning of the tooltip itself. The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over (wikipedia).

That's the the meaning on the tooltip i'm going to share on this occasion, which i took from the wikipedia web site. http://en.wikipedia.org/wiki/Tooltip.

Screenshot

Responsive Tooltip images:acebangsam.us

Demo - Watch On Youtube

For the installation process in the blogspot , follow the steps below:

1. Login to your blogger panel admin

2. Click On Template » Edit HTML
3. Put this script code above </head> If you 've ever install any version as well , skip this step!.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

4. Find this code Ctrl+F  ]]></b:skin> or </style>

5. Then add the following CSS script just above the code ]]></b:skin> or </style>

#tooltip {
 text-align: center;
 color: #fff;
 background: #333;
 position: absolute;
 z-index: 100;
 padding:8px 15px;
    border-radius:3px;
    box-shadow:2px 2px 3px rgba(0,0,0,.2);
}
  #tooltip:after {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
 }
 #tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 10px solid #333;
  top: -20px;
  bottom: auto;
 }
  #tooltip.left:after {
  left: 10px;
  margin: 0;
 }
 #tooltip.right:after {
  right: 10px;
  left: auto;
  margin: 0;
 }

5. Add script Javascript below right above the code </body>.

<script type='text/javascript'>
//<![CDATA[
$('a,img,input,.tool').not('img.tool,input.input-not').attr('rel', 'tooltip')
$( document ).ready( function() {
  var targets = $( '[rel~=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: .9 }, 500 );
  };
   init_tooltip();
  $( window ).resize( init_tooltip );
  var remove_tooltip = function() {
   tooltip.animate( { top: '-=10', opacity: 0 }, 500, function()
   {
    $( this ).remove();
   });
    target.attr( 'title', tip );
  };
   target.bind( 'mouseleave', remove_tooltip );
  tooltip.bind( 'click', remove_tooltip );
 });
});
//]]>
</script>

Click save and see the results, good luck
See my other tutorials about  jQuery
Source: KompiAjaib

Go to Link