js的title提示

最新推荐文章于 2024-02-28 11:06:48 发布

转载最新推荐文章于 2024-02-28 11:06:48 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/contraII/p/3201018.html

本文介绍了一个使用jQuery实现的自定义提示框插件。该插件能够在元素获得焦点时显示提示信息，并在失去焦点时隐藏提示信息。通过简单的初始化设置，可以轻松地为带有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);