波斯马BOSSMA Information Technology

经常在网页上看到这样的效果：
将鼠标放到某个链接或某个区域，就会在鼠标附近弹出一个提示框，里边显示相关提示信息。

在网上找了大量相关类似代码，但是普遍存在浏览器不兼容的问题。没办法，只好修改。

现在这个控件终于调试得差不多了，贡献出来，大家分享。
控件名称:PageTitleTips

[[控件下载(dll文件)]]

[注：下载包含本人全部控件，全部免费使用，如果您需要额外的服务，请给我发电子邮件:bossma@yeah.net]

先看看效果图：

这个控件的特点：
1、兼容IE和FireFox
2、使用的时候只需从工具箱拖动到页面中一次，页面中具有title属性的可见标签都会有这个效果

主要源代码javascript，如果你不使用本控件，也可以把这个javascript添加到页面中达到同样的目的：

 var pltsPop=null;
 var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
 var pltsoffsetY = 15;  // 弹出窗口位于鼠标下方的距离；3-12 合适
 var pltsPopbg="#FFFFEE"; //背景色
 var pltsPopfg="#111111"; //前景色
 var pltsTitle="";
document.write('<div id="pltsTipLayer" style="display: none;position: absolute; z-index:10001"></div>');

function pltsinits()
 {
     document.onmouseover = plts;
     document.onmousemove = moveToMouseLoc;
 }

function plts(evt)
 {  
 	if(evt==null){
 	   evt=window.event; 
 	  }
 	 var pltsTipLayer=document.getElementById("pltsTipLayer");
 	 var o = evt.srcElement?evt.srcElement:evt.target;
 	 var getClientWidth=(document.documentElement.clientWidth == 0) ? document.body.clientWidth : document.documentElement.clientWidth;
 	   
     if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
     if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
     pltsPop=o.dypop;
     if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
     {
        pltsTipLayer.style.left=-1000+"px";
        pltsTipLayer.style.display='';
        var Msg=pltsPop.replace(/\n/g,"<br/>");
        Msg=Msg.replace(/\0x13/g,"<br/>");
        var re=/\{(.[^\{]*)\}/ig;
        if(!re.test(Msg))pltsTitle="简介";
        else{
          re=/\{(.[^\{]*)\}(.*)/ig;
            pltsTitle=Msg.replace(re,"$1")+" ";
          re=/\{(.[^\{]*)\}/ig;
          Msg=Msg.replace(re,"");
          Msg=Msg.replace("<br/>","");}
               var content =
              '<table id="toolTipTalbe"><tr><td>' +
              '<div id="pltsPoptop" class="tipstitle">' +
              '<div id="topleft"><div style="text-align:left;">'+pltsTitle+'</div></div><div id="topright" style="display:none;"><div style="text-align:right;">'+pltsTitle+'</div></div>'+
              '</div>'+
              '<div class="tipsbody">'+Msg+'</div>'+
              '<div id="pltsPopbot" class="tipstitle" style="display:none;">'+
              '<div id="botleft"><div style="text-align:left;">'+pltsTitle+'</div></div><div id="botright" style="display:none;"><div style="text-align:right;">'+pltsTitle+'</div></div>'+
              '</div></td></tr></table>';
               document.getElementById("pltsTipLayer").innerHTML=content;
               document.getElementById("toolTipTalbe").style.width=Math.min(pltsTipLayer.clientWidth,getClientWidth/2.2)+"px";
               moveToMouseLoc(evt);
               return true;
        }
     else
     {
            pltsTipLayer.innerHTML='';
            pltsTipLayer.style.display='none';
            return true;
     }
 }

function moveToMouseLoc(evt)
 {
 	if(evt==null){
 	   evt=window.event; 
 	  }
 	    var pltsTipLayer=document.getElementById("pltsTipLayer");
        if(pltsTipLayer.innerHTML=='')return true;
        var MouseX = evt.x ? evt.x : evt.pageX;
        var MouseY = evt.y ? evt.y : evt.pageY;
        //window.status=event.y;
        var popHeight=pltsTipLayer.clientHeight;
        var popWidth=pltsTipLayer.clientWidth;
        var popTopAdjust=0;
        var popLeftAdjust=0;
        
        var getClientHeight=(document.documentElement.clientHeight == 0) ? document.body.clientHeight : document.documentElement.clientHeight;
        var getClientWidth=(document.documentElement.clientWidth == 0) ? document.body.clientWidth : document.documentElement.clientWidth;
        
        if(MouseY+pltsoffsetY+popHeight>getClientHeight)
        {
                 popTopAdjust=-popHeight-pltsoffsetY*1.5;
                 document.getElementById("pltsPoptop").style.display="none";
                 document.getElementById("pltsPopbot").style.display="";
        }
         else
        {
                 document.getElementById("pltsPoptop").style.display="";
                 document.getElementById("pltsPopbot").style.display="none";
        }
        if(MouseX+pltsoffsetX+popWidth>getClientWidth)
        {
               popLeftAdjust=-popWidth-pltsoffsetX*2;
               document.getElementById("topleft").style.display="none";
               document.getElementById("botleft").style.display="none";
               document.getElementById("topright").style.display="";
               document.getElementById("botright").style.display="";
        }
        else
        { 
        	   document.getElementById("topleft").style.display="";
               document.getElementById("botleft").style.display="";
               document.getElementById("topright").style.display="none";
               document.getElementById("botright").style.display="none";
        }
        var ptleft=0;
        var pttop=0;
        if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
          ptleft = MouseX + pltsoffsetX + popLeftAdjust;
          pttop = MouseY + pltsoffsetY + popTopAdjust; 
        } else{
          ptleft = MouseX + pltsoffsetX + document.body.scrollLeft + document.documentElement.scrollLeft + popLeftAdjust;
          pttop = MouseY + pltsoffsetY + document.body.scrollTop + document.documentElement.scrollTop + popTopAdjust;
        }
        pltsTipLayer.style.left = ptleft + "px";
        pltsTipLayer.style.top = pttop + "px";
       return true;
 }
 pltsinits();

还有一个样式表文件：

#toolTipTalbe{
	font-family:宋体;
	font-size:12px;
	line-height:15px;
	FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);
	-moz-opacity:0.9;
	opacity:0.9;
	border-width:0px;
	width:260px;
	}
.tipsbody{
	background-color: #B1EA45;
	padding-left:14px;
	padding-right:14px;
	padding-top:6px;
	padding-bottom:6px;
	line-height:135%;
	}
.tipstitle{
	background-color: #333333;
	font-weight:bold;
	color:#ffffff;
	width:100%;
	height:19px;
	line-height:19px;
	border-width:0px;
	}

欢迎就这个控件的问题与我讨论！

关键字: Tips 提示信息控件 自定义控件