【WEB】HTML标签自带属性title样式修改

背景

最近字体版权问题，公司的网站页面要统一换字体，Windows平台换成宋体（SimSun），Mac平台换成黑体（SimHei）。然后，偶然留意到title的默认提示框。title的样式是没法使用CSS进行设置的，所以使用了一种折中的方法，通过给document注册mouseover、mouseout、mousemove事件实现修改提示框。

---

实现原理

通过动态创建DIV，滞空HTML标签的title属性。
1. 当触发mouserover事件时，创建DIV。
2. 当触发mousermove事件时，修改DIV的位置。
3. 当触发mouserover事件时，删除DIV。

---

代码

var oldTitle = null;
$(document).bind('mouseover mouseout mousemove',function(event){           
    var left = event.pageX , top = event.pageY;
    var ele = event.target;
    var title = ele.title;

    var type = event.originalEvent.type;
    if(type == 'mouseover'){
        oldTitle = title;
        ele.title = '';
        //if(title && title.length > 0){                
        if(title != null){              
            var showEle = $('<div></div>',{text:title,class:'showTitleBox'}).css({
                position:'absolute',
                top:top+10,
                left:left,
                border:'1px solid #CCC',
                borderRadius:'5px',
                background:"infobackground",
                fontFamily:'SimHei'
            })
            showEle.appendTo('body');               
        }
    }else if(type == 'mouseout'){
        ele.title = oldTitle;
        $('.showTitleBox').remove();
    }else if(type == 'mousemove'){
        $('.showTitleBox').css({
            top:top+10,
            left:left
        })
    }
})