Javascript工具提示定位

我在我的网站上集成了工具提示。我面临着从顶部定位的问题。Javascript工具提示定位

下面是我用过的脚本。

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); 
    } 
};}();

我已经做了很多排列和组合，并使其工作得很好。唯一的问题是顶端定位在浏览器中无法正确显示。

我只为那部分感到震惊。

来源

2013-02-21 nitesh

也许不完全相关，而且Chrome提供了'document.all'，因此你的脚本把浏览器作为IE浏览器... – Teemu 2013-02-21 11:30:17

我使用http：//沙箱.scriptiny.com/tooltip /作为此工具提示的参考。我已经修改了它中的script.js文件来满足要求，但是我没有得到正确的工作。 @Teemu。对不起，但我不理解你的陈述。请详细说明。因为我不是Javascript Pro，所以我尝试了一些逻辑并集成了它。谢谢。 – nitesh 2013-02-22 04:56:06

您可以使用以下脚本。

<script type="text/javascript"> 
$(document).ready(function() { 
$('#id').qtip({ 
     content: 'New Request Alt+N', 
     position: { 
      corner: { 
       target: 'topRight', 
       tooltip: 'bottomLeft' 
      } 
     }, 
     show: 'mouseover', 
     hide: 'mouseout', 
     style: { 
      background: '#A2D959', 
      color: 'black',`enter code here` 
      textAlign: 'center', 
      border: { 
       radius: 4, 
       color: '#A2D959' 
      }, 
      tip: 'bottomLeft' 
     } 
    }); 
}); 
</script>

来源

2013-06-19 06:31:26

Javascript工具提示定位

回答

相关问题