背景

最近字型版權問題，公司的網站頁面要統一換字型，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
        })
    }
})