通过JS修改标签title属性设置鼠标悬浮提示字段效果，火狐，IE8，IE9，360那什么内核 完美兼容。

 

var qTipTag = "*"; //所要改变的标签（需小写）!//

var qTipX = 10;    //弹出窗口位于鼠标左侧的距离。//

var qTipY = 15;    //弹出窗口位于鼠标下方的距离。//



tooltip = {

    name: "qTip",

    offsetX: qTipX,

    offsetY: qTipY,

    tip: null

}



tooltip.init = function () {

    var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";

    if (!tipContainerID) { var tipContainerID = this.name; }

    var tipContainer = document.getElementById(tipContainerID);

    if (!tipContainer) {

        tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");

        tipContainer.setAttribute("id", tipContainerID);

        tipContainer.setAttribute("style", "");

        tipContainer.style.display = "none";

        document.getElementsByTagName("body").item(0).appendChild(tipContainer);

    }



    if (!document.getElementById) return;

    this.tip = document.getElementById(this.name);

    if (this.tip) document.onmouseover = function (evt) { tooltip.setToolTip(evt) };

    if (this.tip) document.onmousemove = function (evt) { tooltip.move(evt) };

}



tooltip.setToolTip = function (evt) {

    anchors = document.getElementsByTagName(qTipTag);

    var obj, sTitle;



    for (var i = 0; i < anchors.length; i++) {

        obj = anchors[i];

        sAlt = obj.alt;

        sTitle = obj.title;



        if (sAlt) {

            obj.setAttribute("tiptitle", sAlt);

            obj.alt = "";

            obj.onmouseover = function () { tooltip.show(this.getAttribute('tiptitle')), tooltip.move(evt) };

            obj.onmouseout = function () { tooltip.hide() };

        }

        else if (sTitle) {

            obj.setAttribute("tiptitle", sTitle);

            obj.title = "";

            obj.onmouseover = function () { tooltip.show(this.getAttribute('tiptitle')), tooltip.move(evt) };

            obj.onmouseout = function () { tooltip.hide() };

        }

    }

}



tooltip.move = function (evt) {

    var x = 0, y = 0;

    var bodyW = document.body.clientWidth;

    var bodyH = document.body.clientHeight;

    var elementH = document.documentElement.clientHeight; //可见区域高度

    var scrollTop = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop; //网页被卷去的高

    var tipW = this.tip.clientWidth;

    var tipH = this.tip.clientHeight;



    if (document.all) {//IE

        x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;

        y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;

        x += window.event.clientX;

        y += window.event.clientY;

    }

    else {//其他浏览器

        x = evt.pageX;

        y = evt.pageY;

    }



    if (x > bodyW - tipW - this.offsetX) {

        x = x - tipW - this.offsetX;

    }

    else {

        x = x + this.offsetX;

    }

    if (y >= elementH + scrollTop - tipH - this.offsetY) {

        y = elementH + scrollTop - tipH - 2;

    }

    else {

        y = y + this.offsetY;

    }



    this.tip.style.left = x + "px";

    this.tip.style.top = y + "px";

}



tooltip.show = function (text) {

    if (!this.tip) return;



    text = text.replace(/\n/g, "<br>").replace(/\0x13/g, "<br>").replace(/\{(.[^\{]*)\}/ig, "");

    var strTab =

        "<table id='toolTipTalbe' style='border:1px solid #007db5;line-height:140%;border-collapse: collapse;'>" +

        "   <tr>" +

        "       <td style='background-color:#99CC33;padding:8px;text-align:center;'>" +

        "           <span style='font-size: 16pt; font-family: 隶书;font-weight: 200;'>--项目提示--</span>" +

        "       </td>" +

        "   </tr>" +

        "   <tr><td style='background-color:#EDEDED;padding:8px;'>" + text + "</td></tr>" +

        "</table>";

    this.tip.innerHTML = strTab;

    this.tip.style.cssText = "display:block;position:absolute;z-index:10001;";

    if (this.tip.clientWidth >= document.documentElement.clientWidth / 3) {

        this.tip.style.width = document.documentElement.clientWidth / 3 + "px";

    }

}



tooltip.hide = function () {

    if (!this.tip) return;

    this.tip.innerHTML = "";

    this.tip.style.display = "none";

}



window.onload = function () {

    tooltip.init();

}

　　将以上代码保存为JS文件引入到页面中    设置标签title属性 

例：<a href="#" title="我是提示内容。。。哈哈<br/>还可以换行呀。。。哈哈。">需要提示的标签</a>      

OK。样式可以通过修改DIV中的表格自定义

效果：

 

以上代码是网上找资料等 修改而来 目前网上有好几个例子 但是对IE9 火狐等都没有兼容。