Home Blogger How to add jQuery Easy Tooltip to Blogger

How to add jQuery Easy Tooltip to Blogger

296
0
SHARE
Easy Tooltip to Blogger

How to add jQuery Easy Tooltip on Blogger

Hello bloggers, how many of you know that we can use Tooltips in blogger to make your website links more easy to identify when users hover the areas which have links in blogger. You can use below code like steps which has given here to add to blogger. You can use JQuery  plugin or code to add tooltip to the website links in any platforms like blogger, WordPress etc.

Here I am going to show about how to add tooltip in blogger sites. Follow below steps to know how to add jQuery easy tooltips to blogger with using code in easy way. You can ask through comments or fb page for any queries regarding blogger. I have given a free live demo for easy understanding of adding tooltip to blogger

How to add Tooltip to Blogger

  • Log on to blogger
  • Click on theme
  • Go through Edit html
  • Now copy below code to before </head> tag

Note: Remove first two lines from the below code if you have included jQuery alredy in blogger

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.0/jquery-migrate.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:45,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 -->

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {
$('a.easytooltip').easyTooltip();
});

//]]>
</script>

<style type='text/css'>
#easyTooltip{
padding:5px 10px;
border:1px solid #000;
background: #333;
color:#fff;
}
</style>
  • Save template after you added code before ending head tag
  • You should use easytooltip class for every link within blogger, the structure have given below

<a class=’easytooltip’ title=’Add Link Title‘ href=’Add url Here‘> Add link name here</a>

Use above structure to add links using easytooltip like add title, link or url and link name from the above sections.

LEAVE A REPLY