jquert 鼠标移上去提示层

今天在招商项目中要通道鼠标移动到图片上面去显示一个提示层信息代替原来的title提示，于是上网搜索了一下，发现网络上面的代码都好复杂，于是找了一个较为简单的修改简化了一下。

//标题提示效果处
var sweetTitles = {
        x: 10,
        y: 20,
        tipElements: "img[name='newImg']",
        init: function() {
            $(this.tipElements).mouseover(function(e) {
                this.myTitle = this.title;
                this.myHref = this.href;
                this.myHref = (this.myHref.length > 200 ? this.myHref.toString().substring(0, 200) + "..." : this.myHref);
                this.title = "";
                var tooltip = "";
                if (this.myTitle == "") {
                    tooltip = "";
                }
                else {
                    tooltip = "<div id='tooltip' style='position:absolute; z-index:1000; max-width:300px; width:auto!important; width:auto; background:#e0feba; border:#9bab81 solid 1px; text-align:left; padding:3px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all'><p style='margin:0;padding:0; color:#000000;font:12px verdana,arial,sans-serif;'>" + this.myTitle + "</p></div>";
                }
                $('body').append(tooltip);
                $('#tooltip')
    .css({
        "top": (e.pageY + 20) + "px",
        "left": (e.pageX) + "px"
    }).show('fast');
            }).mouseout(function() {
                this.title = this.myTitle;
                $('#tooltip').remove();
            });
        }
    };

 

调用方法：在read或者load中，执行sweetTitles.init()即可。

注意：代码 tipElements是需要添加提示的dome对象。