• 通过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 火狐等都没有兼容。

  • 相关阅读:
    如何查看Android SDK源码版本
    迁移 Express 到函数计算
    阿里云安全运营中心:DDoS攻击趁虚而入,通过代理攻击已成常态
    Schedulerx2.0支持应用级别资源管理和任务优先级
    Serverless 解惑——函数计算如何安装字体
    一遇到复杂分析查询就卡顿?MySQL分析实例了解一下
    浅谈企业的数据资产管理
    大咖说备份 | 云,让灾备更简单
    急速上线 Serverless 钉钉机器人“防疫精灵”
    Alibaba Cloud Linux 2 LTS 正式发布,提供更高性能和更多保障
  • 原文地址:https://www.cnblogs.com/fei85454645/p/2413779.html
Copyright © 2020-2023  润新知