js与span 的模仿服务器控件的ToolTip属性

方案一：大家都共用一个span来显示提示内容。

<script type="text/javascript">

         /**
         * 获取鼠标在页面上的位置
         * @param ev        触发的事件
         * @return    x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
         */
         function getMousePoint(ev) {
             // 定义鼠标在视窗中的位置
             var point = {
                 x: 0,
                 y: 0
             };
             // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
             if (typeof window.pageYOffset != 'undefined') {
                 point.x = window.pageXOffset;
                 point.y = window.pageYOffset;
             }
             // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
             // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
             else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
                 point.x = document.documentElement.scrollLeft;
                 point.y = document.documentElement.scrollTop;
             }
             // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
             else if (typeof document.body != 'undefined') {
                 point.x = document.body.scrollLeft;
                 point.y = document.body.scrollTop;
             }

             // 加上鼠标在视窗中的位置
             point.x += ev.clientX;
             point.y += ev.clientY;

            // 返回鼠标在视窗中的位置

           // 获取span，设置span的位置，跟随鼠标
             var spanid = document.getElementById("spanid");
             spanid.style.pixelTop = point.y + 15;
             spanid.style.pixelLeft = point.x + 10;
         }
         //设置span的内容并延迟显示
         function dis(obj) {

             var spanid = document.getElementById("spanid");
             spani.innerHTML = obj.innerHTML;
             setTimeout("xian()", 1000);
          }
         //隐藏span
         function non() {
             var spanid = document.getElementById("spanid");
             spanid.style.display = "none";
         }
         //延迟显示
         function xian() {
             var spanid = document.getElementById("spanid");
             spanid.style.display = "block";
         }
</script>

需要显示类似TooTip属性的div

公用的一个伪装成TooTip的span

方案二：每个标签自己独享一个span来显示提示内容

     <script type="text/javascript">

         /**
         * 获取鼠标在页面上的位置
         * @param ev        触发的事件
         * @return    x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
         */
         function getMousePoint(ev, spanid) {
             // 定义鼠标在视窗中的位置
             var point = {
                 x: 0,
                 y: 0
             };
             // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
             if (typeof window.pageYOffset != 'undefined') {
                 point.x = window.pageXOffset;
                 point.y = window.pageYOffset;
             }
             // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
             // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
             else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
                 point.x = document.documentElement.scrollLeft;
                 point.y = document.documentElement.scrollTop;
             }
             // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
             else if (typeof document.body != 'undefined') {
                 point.x = document.body.scrollLeft;
                 point.y = document.body.scrollTop;
             }

             // 加上鼠标在视窗中的位置
             point.x += ev.clientX;
             point.y += ev.clientY;

             // 返回鼠标在视窗中的位置，设置span的位置跟随鼠标
             var spanid= document.getElementById(spanid);
             spanid.style.pixelTop = point.y;
             spanid.style.pixelLeft = point.x + 10;
         }
         //显示span
         function dis(spanid) {

             var spanid= document.getElementById(spanid);
              spanid.style.display = "block";
              setTimeout("xian("+spanid+")", 1000);
            }
         //隐藏span
         function non(spanid) {
             var spanid= document.getElementById(spanid);
             spanid.style.display = "none";
         }
         //延迟显示
         function xian(spanid) {
             var spanid= document.getElementById(spanid);
             spanid.style.display = "block";
         }
</script>

需要显示类似TooTip属性的div

每个标签都要自带的一个伪装成TooTip的span

方案二的缺点延迟效果不好，但是方案二与方案一最终效果要看整体页面的布局显示。