NOTICE

Adfly Links not working Find Direct Links HERE

How to Set up jQuery Tooltip / Title Pop Up On Mouse Over a Link / Text In Blogger

UPDATE CSS BASED TEXT TOOLTIP CLICK HERE




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






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


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

4 comments :

  1. Hi, Im looking everywhere:

    How to show text when you hover over an image
    (on a single image of a single post.)

    But haven't found anything. Maybe you wrote already about it?

    Thanks in advance.

    ReplyDelete
  2. Hello Claudia
    Thanks for your comment

    Here you searching for something by using which you will be able to show beautifull title when you hover an image.Right ? :)

    See an Updated Demo On this post ( http://bloggerplugnplay.blogspot.com/2009/09/how-to-set-up-jquery-tooltip-title-pop.html ) .I have given there image with tool tip.

    If you face any problem please comment :)

    good luck !

    ReplyDelete
  3. hi good collections of hacks & tips ... this is my 3rd visit 2 your site i just had a question is it possible to show no of clicks occurred on a link when we hover the mouse cursor over it IF its any webmaster service then can u pls tell me which site offers that service 4 free if anything u know abt .... thanks 4 all the tips i will b using them on my site...God Bless.
    Blogging 4 Beginners 4 Money 4 Dummies Complete Blogging Recipes

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)