模拟title提示效果

很多时候我们都要给元素加个提示，比如用td的title,img的alt等，但是他们停留的时间都很短，并且有些时候根本就不出来。能不能替换下他们呢？

实战开发用到了两个地方，一个是显示简单的提示，比如"Hello World!",另一个我用的是一个很强大的js包，叫做wz-tooltip,可能有人用到过，它有很多属性可供选择来呈现不同的显示。

第一个 

简单的提示：

一个脚本，暂起名为title.js。这是我从网上找的个，然后根据自己的需求改了改。

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;
    document.onmouseout = moveToMouseLoc;
}
function plts() {
    var o = event.srcElement;
    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;
        pltsTipLayer.style.display = '';
        var Msg = pltsPop.replace(//n/g, "<br>");
        Msg = Msg.replace(//0x13/g, "<br>");
        var re = //{(.[^/{]*)/}/ig;
        if (!re.test(Msg)) pltsTitle = "<font color=#ffffff>" + title + "</font>";
        else {
            re = //{(.[^/{]*)/}(.*)/ig;
            pltsTitle = Msg.replace(re, "$1") + " ";
            re = //{(.[^/{]*)/}/ig;
            Msg = Msg.replace(re, "");
            Msg = Msg.replace("<br>", "");
        }
        var attr = (document.location.toString().toLowerCase().indexOf("list.asp") > 0 ? "nowrap" : "");
        var content =
      '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">' +
      '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>' + pltsTitle + '</p><p id=topright align=right style="display:none">' + pltsTitle + '<font color=#ffffff>↗</font></b></th></tr>' +
      '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">' + Msg + '</td></tr>' +
      '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>' + pltsTitle + '</p><p id=botright align=right style="display:none">' + pltsTitle + '<font color=#ffffff>↘</font></b></th></tr>' +
      '</table></td></tr></table>';
        pltsTipLayer.innerHTML = content;
        toolTipTalbe.style.width = Math.min(pltsTipLayer.clientWidth, document.body.clientWidth / 2.2);
        moveToMouseLoc();
        return true;
    }
    else {
        pltsTipLayer.innerHTML = '';
        pltsTipLayer.style.display = 'none';
        return true;
    }
}

function moveToMouseLoc() {
    if (event.type == "click" || event.type == "mouseout") {
        pltsTipLayer.style.display = "none";
        return true;
    }
       
    if (pltsTipLayer.innerHTML == '') return true;
    var MouseX = event.x;
    var MouseY = event.y;
    //window.status=event.y;
    var popHeight = pltsTipLayer.clientHeight;
    var popWidth = pltsTipLayer.clientWidth;
    if (MouseY + pltsoffsetY + popHeight > document.body.clientHeight) {
        popTopAdjust = -popHeight - pltsoffsetY * 1.5;
        pltsPoptop.style.display = "none";
        pltsPopbot.style.display = "";
    }
    else {
        popTopAdjust = 0;
        pltsPoptop.style.display = "";
        pltsPopbot.style.display = "none";
    }
    if (MouseX + pltsoffsetX + popWidth > document.body.clientWidth) {
        popLeftAdjust = -popWidth - pltsoffsetX * 2;
        topleft.style.display = "none";
        botleft.style.display = "none";
        topright.style.display = "";
        botright.style.display = "";
    }
    else {
        popLeftAdjust = 0;
        topleft.style.display = "";
        botleft.style.display = "";
        topright.style.display = "none";
        botright.style.display = "none";
    }
    pltsTipLayer.style.left = MouseX + pltsoffsetX + document.body.scrollLeft + popLeftAdjust;
    pltsTipLayer.style.top = MouseY + pltsoffsetY + document.body.scrollTop + popTopAdjust;
    return true;
}
样式表：

.tableBorder7{width:800;border:solid 1px #000000; background-color: #000000;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}

 

前台调用：

 //替换title
          pltsinits(); //想加提示的元素必须事先加上title或者alt

 

第二个

这个脚本可以从网上下载，叫wz_tooltip.js，从http://www.walterzorn.com下载。

<script src="wz_tooltip.js" type="text/javascript"></script>要放在<body>里面，这个比较特殊。

function pltsinits() {
        var otdArr = document.getElementsByTagName("TD");
        //alert(otdArr.length)
        for (i = 0; i < otdArr.length; i++) {
            if (otdArr[i].sm != null && otdArr[i].sm != "") {//属性sm为自定义，不能为title,否则第一次的时候正常，第二次title就成""
                var ottlArr = otdArr[i].sm.split("|");
                var content = ottlArr[1];
                if (content != null && content != "") {
                    otdArr[i].onmouseover = function(event) {//这里面不能再用到上面定义的变量，否则取到的值会始终是最后一个
                    var e = (event) ? event : window.event; //兼容浏览器
                    var otd = e.srcElement; //alert(otd.outerHTML)
                    var ttlArr = otd.sm.split("|");
                        var bt = type + ttlArr[0] + "区块";
                        var cnt = ttlArr[1];
                        Tip(cnt, TITLE, bt, TITLEBGCOLOR, '#333333', TITLEFONTCOLOR, '#ffffff', HEIGHT, -100, WIDTH, 250, BGCOLOR, '#B1EA45', STICKY, true, DURATION, 2500, SHADOW, true, SHADOWCOLOR, '#dd99aa')
                    }
                    otdArr[i].onmouseout = function() { UnTip(); }
                }
                else
                    otdArr[i].sm = "";
            }
        }
    }

 

比如一个td <td sm='计划|<%# Eval("jhqk").ToString().Trim()%>'

 

写的比较粗糙，以后再修改。呵呵