eclipse 把鼠标移到某个类上弹出提示信息是怎么实现的

用js实现，当鼠标移到某个控件上时弹出一个提示层
要求：1、这个层要紧紧围绕在控件周围（默认在右边）
      2、当控件（比如一个button)在页面的又下角时，这个提示层不能超出边界，而是要考虑显示在它左边
分不多，求源码/思路/或网上相应效果教程地址    不胜感激!

解决方案 »

  1.   

    参考：
    http://paranimage.com/16-javascript-tooltips/
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    body,div{ margin:0; padding:0}
    #div{ width:100px; height:100px; border:1px solid #000; position:absolute; display:none;}
    #btn{ width:80px; height:30px; margin:0; padding:0; border:none;}
    </style>
    </head>
    <body>
    <input type="button" value="button" id="btn" /><script type="text/javascript">
    function getScreenSize()
    {
        var theWidth,theHeight;
        if (window.innerWidth) 
        { 
        theWidth = window.innerWidth 
        theHeight = window.innerHeight 
        } 
        else if (document.compatMode=='CSS1Compat') 
        { 
        theWidth = document.documentElement.clientWidth 
        theHeight = document.documentElement.clientHeight 
        } 
        else if (document.body) 
        { 
        theWidth = document.body.clientWidth 
        theHeight = document.body.clientHeight 
        } 
        var result = [theWidth,theHeight];
        return result;
    }
    var btn = document.getElementById("btn");
    var div = document.createElement("div");
    div.id = "div"
    document.body.appendChild(div);btn.onmouseover = function()
    {
        var height = 30
        var width = 80
        var left = btn.offsetLeft;
        var top = btn.offsetTop;
        var divH = 100;
        var divW = 100;
        var divL = 0 ; 
        var divT = 0;    if(left+width+divW>getScreenSize()[0]) 
            divL=left-divW;
        else 
            divL=left+width;    if(top+height+divH>getScreenSize()[1]+document.documentElement.scrollTop) 
           divT=getScreenSize()[1]+document.documentElement.scrollTop-divH
        else 
           divT = top;    div.style.left = divL+"px";
        div.style.top = divT+"px";
        div.style.display="block"
    }btn.onmouseout = function()
    {
        div.style.display="none"
    }</script></body>
    </html>
      

  3.   

    非常感谢，这个方法非常好，但现在出现了两个问题
    1、就是假如我有多个控件，根据不同的控件弹出不同的提示信息怎么办？不可能写很多个重复的函数吧？
    2、当我将这个<input>用表格套起来（将他放到最右下角）的时候，他就就现BUG了（提示在其他地方），
    也就是  var top = btn.offsetTop;  的值不准确了，这是怎么回事？