Simple Responsive Tooltip for All Elements

Tooltip without a plugin that can be used on all elements of the blog such as links, images, text, input, table, div, and others. Now I will share is also another alternative for a tooltip without plugins.
CSS code

#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);border:1px solid #6f6f6f}
#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:before{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #6f6f6f;content:'';position:absolute;left:50%;bottom:-12px;margin-left:-12px}
#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;top:-20px;bottom:auto}
#tooltip.top:before{border-top-color:transparent;border-bottom:12px solid #6f6f6f;top:-24px;bottom:auto}
#tooltip.left:after{left:10px;margin:0}
#tooltip.left:before{left:8px;margin:0}
#tooltip.right:after{right:10px;left:auto;margin:0}
#tooltip.right:before{right:8px;left:auto;margin:0}

HTML code like this:

<p>
Lorem ipsum nam lorem debitis ut, postulant <a href="#" title="Iriure appetere menandri ei duo, ad per sumo solum tibique?">vulputate his cu</a>, sit mutat accumsan ne. Vis ea sapientem assentior prodesset. Sea ex oratio accumsan, ne per zzril doming, pri ne periculis corrumpit reprimique? Fugit legimus dignissim ad cum, eruditi invidunt urbanitas pri te.
</p>
<p>
Cum ea mundi bonorum <a class='test' href="#" title="Sea ex oratio accumsan">reprehendunt</a>, no elitr fabulas rationibus pro, vix tale sint id <a class='other' href="#" title="Sea ex oratio accumsan">reprehendunt</a>.
</p>
<div class="separator" style="text-align: center;">
<img alt="Nam liber tempor cum soluta" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALBM1IddaI6cxxLpFlX9mkiDr_mjz2DB-5mGyxXQtk3jMpi17cVfalCHE7XIzxCe80kGTZLUtTgXDXMrkecYcQeL_XIUDbWtHUGnsYVkT0aVf28Cn5OD3SR-Q3rpy0oHmn7LimExrtRA/s1600/8.png" height="114" title="Nam liber tempor cum soluta nobis eleifend option" width="220" />
    <a class="tool" href="#" title="Nam liber tempor cum soluta nobis eleifend option"><img class="tool" alt="Nam liber tempor cum soluta" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALBM1IddaI6cxxLpFlX9mkiDr_mjz2DB-5mGyxXQtk3jMpi17cVfalCHE7XIzxCe80kGTZLUtTgXDXMrkecYcQeL_XIUDbWtHUGnsYVkT0aVf28Cn5OD3SR-Q3rpy0oHmn7LimExrtRA/s1600/8.png" height="114" title="Nam liber tempor cum soluta nobis eleifend option" width="220"/></a></div>
<div class="tool" title="Click to open content!" style="display:inline-block;margin:20px 0">Div with title tag</div><br/>
<input placeholder='Input with title tag' title='Click to search!' type='text'/><br/><br/>
<input class="input-not" placeholder='Input without title tag' title='Click to search!' type='text'/><br/><br/>

Code Javascript:

$('a,img,input,.tool,img.tool').not('input.input-not,a.tool').attr('rel', 'tooltip');
$('a.tool').data("title", $('a.tool').attr("title")).removeAttr("title");
$(document).ready(function(){var e=$("[rel~=tooltip]"),t=false,n=false,r=false;e.bind("mouseenter",function(){t=$(this);tip=t.attr("title");n=$('<div id="tooltip"></div>');if(!tip||tip=="")return false;t.removeAttr("title");n.css("opacity",0).html(tip).appendTo("body");var e=function(){if($(window).width()<n.outerWidth()*1.5)n.css("max-width",$(window).width()/2);else n.css("max-width",340);var e=t.offset().left+t.outerWidth()/2-n.outerWidth()/2,r=t.offset().top-n.outerHeight()-20;if(e<0){e=t.offset().left+t.outerWidth()/2-20;n.addClass("left")}else n.removeClass("left");if(e+n.outerWidth()>$(window).width()){e=t.offset().left-n.outerWidth()+t.outerWidth()/2+20;n.addClass("right")}else n.removeClass("right");if(r<0){var r=t.offset().top+t.outerHeight();n.addClass("top")}else n.removeClass("top");n.css({left:e,top:r}).animate({top:"+=10",opacity:.9},500)};e();$(window).resize(e);var r=function(){n.animate({top:"-=10",opacity:0},500,function(){$(this).remove()});t.attr("title",tip)};t.bind("mouseleave",r);n.bind("click",r)})})

DEMO

http://www.kompiajaib.com/2014/09/responsive-simple-tooltip-untuk-semua-elemen.html