I have developed the following user script which will show the html element under mouse on mouseover in the tooltip.
Earlier I was using the same script as a content script in a Chrome Extension and it is working absolutely fine there.
I am getting the following error:
Uncaught TypeError: Cannot read property 'timer' of undefined
// ==UserScript==
// @name Tooltip
// @author Saurabh Saxena
// @version 1.0
// ==/UserScript==
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt, t, c, b, h;
var ie = document.all ? true : false;
document.onmouseover = function(e,w)
{
var link = document.location.toString();
link = link.split('.');
if(!link[1].match(/facebook/) && !link[1].match(/google/) && !link[1].match(/youtube/) && !link[2].match(/google/))
{
if (tt == null) {
tt = document.createElement('div');
tt.setAttribute('id', id);
t = document.createElement('div');
t.setAttribute('id', id + 'top');
c = document.createElement('div');
c.setAttribute('id', id + 'cont');
b = document.createElement('div');
b.setAttribute('id', id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.zIndex = 10000000;/*Important Dont Change it or the tooltip will move below the stack*/
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = function(e) {
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';};
}
tt.style.display = 'block';
var str = "";
var currenttag = "";
var parenttag = "";
var tooltip = "";
var flag = 0;
var chk = e.srcElement.parentNode;
/*creating contents of parent tag if it exists*/
if(chk != null)
{
var parenttag = "<" + chk.nodeName;
for (var i = 0; i < chk.attributes.length; i++) {
var attrib = chk.attributes[i];
if(attrib.value == "")
parenttag = parenttag + " " + attrib.name;
else
parenttag = parenttag + " " + attrib.name + ' ="' + attrib.value + '"';
parenttag = parenttag + " ";
}
parenttag = trim(parenttag);
tooltip = parenttag + ">" + "\n\n";
}
/*creating contents of current tag*/
currenttag = "<" + e.srcElement.nodeName;
if(e.srcElement.attributes.length == 0)
flag = 0;
for (var i = 0; i < e.srcElement.attributes.length; i++)
{
var attrib = e.srcElement.attributes[i];
if(attrib.value == "")
currenttag = currenttag + " " + attrib.name;
else
{
flag = 1;
currenttag = currenttag + " " + attrib.name + ' ="' + attrib.value + '"';
currenttag = currenttag + " ";
}
}
currenttag = trim(currenttag);
currenttag = currenttag + ">";
currenttag = currenttag + e.srcElement.innerHTML;
currenttag = currenttag + "</" ;
currenttag = currenttag + e.srcElement.nodeName;
currenttag = currenttag + ">";
tooltip = tooltip + currenttag;
tooltip = tooltip.toLowerCase();
if(currenttag == "" || flag == 0)
return;
c.innerText = tooltip;
tt.style.width = w ? w + 'px' : 'auto';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
h = parseInt(tt.offsetHeight);
clearInterval(tt.timer);
tt.timer = setInterval(function ()
{
var a = alpha;
var d = 1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none' }
} }, timer);
}
}//end onmousedown
document.onmouseout = function()
{
clearInterval(tt.timer);
tt.timer = setInterval(function () {
var a = alpha;
var d = -1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none'; }
} }, timer);
}
function trim(s) {
s = s.replace(/(^\s*)|(\s*$)/gi,"");
s = s.replace(/[ ]{2,}/gi," ");
s = s.replace(/\n /,"\n");
return s;
}
// ==UserScript==
// name Tooltip
// author Saurabh Saxena
// version 1.0.0
// description Show Google Rich Snippet Markup Tooltip
// ==/UserScript==
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt, t, c, b, h;
var ie = document.all ? true : false;
document.onmouseover = function(e,w)
{
var link = document.location.toString();
link = link.split('.');
if(!link[1].match(/facebook/) && !link[0].match(/workflow/) && !link[1].match(/google/) && !link[1].match(/youtube/) && !link[2].match(/google/) && !link[0].match(/eveforeval/) && !link[0].match(/trax/) && !link[0].match(/b/))
{
if (tt == null) {
tt = document.createElement('div');
tt.setAttribute('id', id);
tt.style.position = 'absolute';
tt.style.display = 'block';
t = document.createElement('div');
t.setAttribute('id', id + 'top');
t.style.display = 'block';
t.style.height = '5px';
t.style.marginLeft = '5px';
t.style.overflow = 'hidden';
c = document.createElement('div');
c.setAttribute('id', id + 'cont');
c.style.display = 'block';
c.style.padding = '2px 12px 3px 7px';
c.style.marginLeft = '5px';
c.style.background = '#666';
c.style.color = '#FFF';
b = document.createElement('div');
b.setAttribute('id', id + 'bot');
b.style.display = 'block';
b.style.height = '5px';
b.style.marginLeft = '5px';
b.style.overflow = 'hidden';
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.zIndex = 10000000;/*Important Dont Change it or the tooltip will move below the stack*/
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = function(e) {
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';};
}
tt.style.display = 'block';
var str = "";
var currenttag = "";
var parenttag = "";
var tooltip = "";
var flag = 0;
// var chk = getRootElement(e.srcElement.parentNode);
var chk = e.srcElement.parentNode;
/*creating contents of parent tag if it exists*/
if(chk != null)
{
var parenttag = "<" + chk.nodeName;
for (var i = 0; i < chk.attributes.length; i++) {
var attrib = chk.attributes[i];
if(attrib.value == "")
parenttag = parenttag + " " + attrib.name;
else
parenttag = parenttag + " " + attrib.name + ' ="' + attrib.value + '"';
parenttag = parenttag + " ";
}
parenttag = trim(parenttag);
tooltip = parenttag + ">" + "\n\n";
}
/*creating contents of current tag*/
currenttag = "<" + e.srcElement.nodeName;
if(e.srcElement.attributes.length == 0)
flag = 0;
for (var i = 0; i < e.srcElement.attributes.length; i++)
{
var attrib = e.srcElement.attributes[i];
if(attrib.value == "")
currenttag = currenttag + " " + attrib.name;
else
{
flag = 1;
currenttag = currenttag + " " + attrib.name + ' ="' + attrib.value + '"';
currenttag = currenttag + " ";
}
}
currenttag = trim(currenttag);
currenttag = currenttag + ">";
currenttag = currenttag + e.srcElement.innerHTML;
currenttag = currenttag + "</" ;
currenttag = currenttag + e.srcElement.nodeName;
currenttag = currenttag + ">";
tooltip = tooltip + currenttag;
tooltip = tooltip.toLowerCase();
if(currenttag == "" || flag == 0)
return;
c.innerText = tooltip;
tt.style.width = w ? w + 'px' : 'auto';
if (!w && ie) {
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
h = parseInt(tt.offsetHeight);
clearInterval(tt.timer);
tt.timer = setInterval(function ()
{ var a = alpha;
var d = 1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none' }
} }, timer);
}
}//end onmousedown
document.onmouseout = function()
{
clearInterval(tt.timer);
tt.timer = setInterval(function () {
var a = alpha;
var d = -1;
if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
var i = speed;
if (endalpha - a < speed && d == 1) {
i = endalpha - a;
} else if (alpha < speed && d == -1) {
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
} else {
clearInterval(tt.timer);
if (d == -1) { tt.style.display = 'none'; }
} }, timer);
}
function trim(s) {
s = s.replace(/(^\s*)|(\s*$)/gi,"");
s = s.replace(/[ ]{2,}/gi," ");
s = s.replace(/\n /,"\n");
return s;
}