Subscribe via RSS Feed

URL Tooltip in blogspot

URL Tooltip in blogspot tutorial. What is tooltip? Tooltip is a little pop-up hover effect when you hover on a link, it was available on wordpress as a plugin. Today I will share how to achieve this cool effect in blogspot as well.

Tooltip example :

tooltip

But we will only achieve the URL as tooltip. As usually firstly go to Dashboard > Design > Edit HTML and then find the </head> markup, paste the below code into it. At last of course push the save button.

URL Tooltip blogspot :

<style>
/* Tooltips By Jejaktrend.com*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#000;
border:2px double #ccc;
text-align:left;
padding:3px 5px 5px 5px;
min-height:1em;
-moz-border-radius:5px;
}
body div#toolTip p {
margin:0;
padding:0;
color:#ccc;
font:11px/12px verdana,arial,sans-serif;
font-weight:bold;
}
body div#toolTip p em {
display:block;
margin-top:2px;
color:#fff;
font-style:normal;
font-weight:normal;
}
body div#toolTip p em span {
font-weight:bold;
color:#fff;
}
</style>
<script src=’http://javscript-code.googlecode.com/files/tooltips.js’ type=’text/javascript’/>
<script>
/*
Sweet Titles (c) Creative Commons 2005
http://creativecommons.org/licenses/by-sa/2.5/
*/
var sweetTitles = {
xCord : 0, // @Number: x pixel value of current cursor position
yCord : 0, // @Number: y pixel value of current cursor position
tipElements : [&#39;a&#39;,&#39;abbr&#39;,&#39;acronym&#39;], // @Array: Allowable elements that can have the toolTip
obj : Object, // @Element: That of which you&#39;re hovering over
tip : Object, // @Element: The actual toolTip itself
active : 0, // @Number: 0: Not Active || 1: Active
init : function() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var i,j;
this.tip = document.createElement(&#39;div&#39;);
this.tip.id = &#39;toolTip&#39;;
document.getElementsByTagName(&#39;body&#39;)[0].appendChild(this.tip);
this.tip.style.top = &#39;0&#39;;
this.tip.style.visibility = &#39;hidden&#39;;
var tipLen = this.tipElements.length;
for ( i=0; i&lt;tipLen; i++ ) {
var current = document.getElementsByTagName(this.tipElements[i]);
var curLen = current.length;
for ( j=0; j&lt;curLen; j++ ) {
addEvent(current[j],&#39;mouseover&#39;,this.tipOver);
addEvent(current[j],&#39;mouseout&#39;,this.tipOut);
current[j].setAttribute(&#39;tip&#39;,current[j].title);
current[j].removeAttribute(&#39;title&#39;);
}
}
},
updateXY : function(e) {
if ( document.captureEvents ) {
sweetTitles.xCord = e.pageX;
sweetTitles.yCord = e.pageY;
} else if ( window.event.clientX ) {
sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
}
},
tipOut: function() {
if ( window.tID ) {
clearTimeout(tID);
}
if ( window.opacityID ) {
clearTimeout(opacityID);
}
sweetTitles.tip.style.visibility = &#39;hidden&#39;;
},
checkNode : function() {
var trueObj = this.obj;
if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
return trueObj;
} else {
return trueObj.parentNode;
}
},
tipOver : function(e) {
sweetTitles.obj = this;
tID = window.setTimeout(&quot;sweetTitles.tipShow()&quot;,500);
sweetTitles.updateXY(e);
},
tipShow : function() {
var scrX = Number(this.xCord);
var scrY = Number(this.yCord);
var tp = parseInt(scrY+15);
var lt = parseInt(scrX+10);
var anch = this.checkNode();
var addy = &#39;&#39;;
var access = &#39;&#39;;
if ( anch.nodeName.toLowerCase() == &#39;a&#39; ) {
addy = (anch.href.length &gt; 100 ? anch.href.toString().substring(0,100)+&quot;…&quot; : anch.href);
var access = ( anch.accessKey ? &#39; &lt;span&gt;[&#39;+anch.accessKey+&#39;]&lt;/span&gt; &#39; : &#39;&#39; );
} else {
addy = anch.firstChild.nodeValue;
}
this.tip.innerHTML = &quot;&lt;p&gt;&quot;+anch.getAttribute(&#39;tip&#39;)+&quot;&lt;em&gt;&quot;+access+addy+&quot;&lt;/em&gt;&lt;/p&gt;&quot;;
if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) &lt; parseInt(this.tip.offsetWidth+lt) ) {
this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+&#39;px&#39;;
} else {
this.tip.style.left = lt+&#39;px&#39;;
}
if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) &lt; parseInt(this.tip.offsetHeight+tp) ) {
this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+&#39;px&#39;;
} else {
this.tip.style.top = tp+&#39;px&#39;;
}
this.tip.style.visibility = &#39;visible&#39;;
this.tip.style.opacity = &#39;.1&#39;;
this.tipFade(10);
},
tipFade: function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac &lt; 90 ) {
this.tip.style.opacity = &#39;.&#39;+newOpac;
this.tip.style.filter = &quot;alpha(opacity:&quot;+newOpac+&quot;)&quot;;
opacityID = window.setTimeout(&quot;sweetTitles.tipFade(&#39;&quot;+newOpac+&quot;&#39;)&quot;,20);
}
else {
this.tip.style.opacity = &#39;.90&#39;;
this.tip.style.filter = &quot;alpha(opacity:90)&quot;;
}
}
};
function pageLoader() {
sweetTitles.init();
}
addEvent(window,&#39;load&#39;,pageLoader);

Can you see the code did include the CSS part to style the tooltip? You can change the color from #000 (black) to any custom color that you like. Google HTML Hex color to find your desire color.

Very simple way to enable URL tooltip in blogspot right? Hope you like this tutorial ~

Category: blogspot tutorials