jquert 鼠标移上去提示层

最新推荐文章于 2020-06-11 14:42:41 发布

转载最新推荐文章于 2020-06-11 14:42:41 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shunhe316/archive/2012/08/28/2660879.html

本文介绍了一种简化的方法，用于在网页项目中通过鼠标悬停显示提示层信息，替代传统的title提示，包括代码实现和使用方法。

今天在招商项目中要通道鼠标移动到图片上面去显示一个提示层信息代替原来的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对象。

转载于:https://www.cnblogs.com/shunhe316/archive/2012/08/28/2660879.html