js的title提示

$(function() {
    //先在页面创建一个层
    var jqtip = $("<div id='jqtip20130719'" +
        "style='padding: 10px; " +
        "border: 1px solid red;" +
        "background-color: white; " +
        "position: absolute; " +
        "z-index:10001;" +
        "display: none; " +
        "font-family: 宋体; " +
        "font-size: 12px'>fafsdfsa" +
        "</div>");
    $(document.body).append(jqtip);
});
(function (window, undefined) {
    var tips = {
        init:function(callback){
            $("[title]").css({
                'cursor': 'help'
            }).bind("focus", function () {
                var tit = this.getAttribute('title');
                this.setAttribute('msg', tit);
                this.setAttribute('title', '');
                $("#jqtip20130719").html(tit.replace(/(\\n)/g, '<br/>')).css({
                    'left': $(this).position().left,
                    'top': $(this).position().top + 20
                }).show();
            });
            $("[title]").bind("blur", function () {
                this.setAttribute('title', this.getAttribute('msg'));
                $("#jqtip20130719").hide();
                if (callback)
                    callback();
            });
        }
    };
    window.tip = tips;
})(window);

 

页面调用:

tip.init(回调函数);

 

posted @ 2013-07-19 17:42  魂斗罗II  阅读(256)  评论(0编辑  收藏  举报