我在我的网站上集成了一个工具提示。我面临着从顶部定位的问题。
下面是我使用的脚本。
var tooltip = function () {
var id = 'tt';
var top = 12;
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;
return {
show: function (v, w) {
//debugger
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.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
var imagethemefolder;
if (window.theForm.ctl00$ddlSiteSkin) {
imagethemefolder = window.theForm.ctl00$ddlSiteSkin.value;
}
else {
imagethemefolder = window.parent.theForm.ctl00$ddlSiteSkin.value;
}
if (v == 'Save') {
v = '<img src="../Styles/Themes/' + imagethemefolder + '/Images/saveTooltip.png" class="ttImgPlacement" alt="" /><b class="ttTitle">Save</b><span class="ttContent">Select this option to Save the Records in database</span></strong>'
}
c.innerHTML = v;
//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) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function () { tooltip.fade(1) }, timer);
},
pos: function (e) {
//debugger
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
if (ie) {
if ((event.screenY - event.offsetY) > 100) {
var ci = Math.ceil(event.screenY - event.offsetY);
if (GetRadWindow()) {
//var height = document.parentWindow.GetRadWindow().get_height()
ci = 60;
}
var restval = ci % 100;
restval = restval.roundTo(10) / 20;
if (restval >= 1) {
restval = restval - 1;
}
ci = ci.roundToLess(100);
tt.style.top = (ci + (20 * restval)) + 'px';
}
else {
tt.style.top = 50 + 'px';
}
}
else if (navigator.userAgent.indexOf('Firefox') != -1) {
//debugger
if ((e.screenY - e.layerY) > 100) {
var ci = Math.ceil(e.screenY - e.layerY);
if (GetRadWindow()) {
ci = 60;
}
var restval = ci % 100;
restval = restval.roundTo(10) / 20;
if (restval >= 1) {
restval = restval - 1;
}
ci = ci.roundToLess(100);
tt.style.top = (ci + (20 * restval)) + 'px';
}
else {
tt.style.top = 50 + 'px';
}
}
else {
if ((e.screenY) > 100) {
//debugger
var ci = Math.ceil(e.screenY);
if (GetRadWindow()) {
//debugger
ci = 80;
}
var restval = ci % 100;
restval = restval.roundTo(10) / 20;
if (restval >= 2) {
restval = restval - 2;
}
ci = ci.roundToLess(100);
tt.style.top = (ci + (20 * restval)) + 'px';
}
else {
tt.style.top = 50 + 'px';
}
}
//tt.style.top = ie ? (event.screenY - event.offsetY - top) + 'px' : (e.screenY - (e.layerY - top + 5)) + 'px';
if (l > (document.documentElement.offsetWidth - 305)) {
tt.style.left = (l + left - 300) + 'px';
}
else {
tt.style.left = (l + left) + 'px';
}
},
fade: function (d) {
var a = alpha;
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' }
}
},
hide: function () {
clearInterval(tt.timer);
tt.timer = setInterval(function () { tooltip.fade(-1) }, timer);
}
};} ();
我对此做了很多排列和组合,并使它几乎可以正常工作。唯一的问题是顶部位置没有在浏览器中正确显示。
我只为那部分感到震惊。