JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Juiz LinkinTips</h1>

<div id="areaIMG">
<img src="http://4.bp.blogspot.com/_ALuJjudg6Rg/S5Y47K_3c6I/AAAAAAAACBk/WPEQmCBS65w/s90/be2n.png" title="The famous tools blog in the world, go to the page http://undercover-blogger.blogspot.com/ in order to learn more about blogspot"/>
<img src="http://2.bp.blogspot.com/-iUg7wV6dG_s/UD8Sj-e2x3I/AAAAAAAAAS4/z3l0bcNFhYc/s160/win8.jpg" title="Dont forget to visit my about me page, go to the page http://about.me/beben-koben in order to learn more information about me"/>
<img src="http://1.bp.blogspot.com/-NR5AsAwtJmQ/UHXIjOiUsSI/AAAAAAAAFwA/HbQ6JL52t1A/s150/bebenkoben.jpg" title="Dont forget to visit my gravatar page, go to the page http://en.gravatar.com/bebenkoben in order to learn more information about gravatar"/>
</div>

<p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2013/06/linkintips-tooltip-jquery-plugin-for-image.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://undercover-blogger.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:25px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
img {
	display: inline-block;
	padding: 10px 10px 20px 10px;
	margin: 0 10px;
	background: #fff;
	-moz-box-shadow: 2px 2px 5px #aaa;
	-webkit-box-shadow: 2px 2px 5px #aaa;
	box-shadow: 2px 2px 5px #aaa;
}
.jTips {
	position: absolute;
	text-align: left;
	top: 0;	left: 0;
	display: none;
	width: 150px;
	padding: 7px;
	font-size: 1.2em;
	line-height: 1.3em;
	color: #111;
	background: #fff;
	overflow: hidden;
	z-index: 500;
	border: 1px solid #555;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 2px 2px 9px #000;
	box-shadow: 2px 2px 9px #000;
	word-wrap: break-word;
}
.jTWrapper {
	position: relative;
	display: inline-block;
	cursor: help;
}
#areaIMG {
	margin: 45px auto;
	font-size: 0.625em;
	color: #515742;
	text-align: center;
}

JavaScript

(function(a){var b;a.fn.juizLinkinTips=function(c){b=a.extend({},e,c);a(this).each(function(){var c=a(this).attr("title"),d='<span class="jTips">';d+=c.replace(RegExp(b.beforeURL+" (.*) "+b.beforeTitle+" (.*)","gi"),'<a href="$1" title="$2">$1</a>');d+="</span>";a(this).wrap('<span class="jTWrapper"></span>');a(this).parents("span:first").prepend(d);a(this).removeAttr("title")});a(".jTips").css("opacity","0");a("span.jTWrapper").mouseover(function(){a(this).children("span.jTips").stop(!0); a(this).children("span.jTips").css("display")=="none"&&a(this).children("span.jTips").css({display:"block"});a(this).children("span.jTips").animate({opacity:b.gotoOpacity,top:b.gotoTop,left:b.gotoLeft},b.duration)});a("span.jTWrapper").mouseout(function(){a(this).children("span.jTips").delay(b.tipsDelay);a(this).children("span.jTips").animate({opacity:0,top:"0px",left:"0px"},b.duration,function(){a(this).css({display:"none"})})})};var e={beforeURL:"go to the page",beforeTitle:"in order to", gotoOpacity:"0.9",gotoTop:"-17px",gotoLeft:"25px",duration:"300",tipsDelay:"300"}})(jQuery);

$(document).ready(function() {
$("img[title]").juizLinkinTips();	
});