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

方案一：大家都共用一个span来显示提示内容。
< 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";
      }
需要显示类似TooTip属性的div
公用的一个伪装成TooTip的span


方案二：每个标签自己独享一个span来显示提示内容
    < 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";
      }
需要显示类似TooTip属性的div
方案二的缺点延迟效果不好，但是方案二与方案一最终效果要看整体页面的布局显示

 

原文链接: http://www.itbar.org/forum-viewthread-tid-142.html