How to Auto Show Full Image or Original Image in Tooltip on Hover Its Thumbnail or Small Image Using jQuery In Blogger

UPDATE CSS BASED TEXT TOOLTIP CLICK HERE




If you want to Show Image In Tool Tip click any one Below :-

• Show image on hover a Link
• Show image on hover a Thumbnail/small image

First of All

What is a TOOLTIP ?

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over.

Here we are going To make it COOL...
Just SEE DEMO

DEMO

Its COOL is'n' it...

Some special features

1* It is very easy to Apply
2* Tt does not effect the OPage load time.
3* This can be applied on any segment of your webpage.
4* It can be used on an Image also.

Lets begin Installation...




Step 1:

Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Search For ]]></b:skin> code:


Copy below code and paste it just before the ]]></b:skin> tag.

#easyTooltip{padding:5px 10px;border:1px solid #EF6D21;background: #181C18;color:#E0EFE0;}

Step 2:

Search </head> tag:

Copy below code and paste it just before the </head> tag.

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

<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->

Click on "Save Templates"

Now When Ever you want to show Title Just Use Below Format

<a class='tooltip' title='Your Link Title' href="Your URL">Link Name</a>

You Must See

How to Auto Show Full Image or Original Image in Tooltip on Hover Its Thumbnail or Small Image Using jQuery In Blogger