◄ Min  Size Fonts: + | - | ± Color: Max ►

LinkinTips is Tooltip jQuery Plugin for Image

Satu tema postingan yang belum habis untuk dibahas yakni mengenai Tooltip Artikel easy jquery tooltip plugin sudah mewakili jenis tooltips yg ada. Koben menemukan juiz linkintips yaitu tooltip pada image, yg dapat menyertakan syntax link di area title? Karena merupakan trick script jQuery plugin, berarti harus punya<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
(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);

Script Pemanggil

$(document).ready(function() {
$("img[title]").juizLinkinTips();
});
.jTips {
 position: absolute;
 text-align: left;
 top: 0; left: 0;
 display: none;
 width: 150px;
 padding: 7px;
 font-size: 1em;
 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;
}
Resource by: jq.creativejuiz.fr
Bonus links
purecss.io
brandcolors.net
luis-almeida.github.io/unveil
stylifyme.com
screensiz.es
Happy blogging \m/
Loading...
XLinkinTips is Tooltip jQuery Plugin for Image

Subscribe my posts Register For Free!

7 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE