在指定位置上方出现通用jquery悬浮提示框插件

Posted 2020-08-20

工作需要，网站悬浮提示框要求出现在指定元素上方，由于工作量修改比较大所以要求全站通用，所以写了一个juqery插件，插件很简单，大家可以自行更改样式。

请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1876266

插件代码如下：

//提示框插件
; (function ($) {
    $.fn.tooltips = function (options) {
        $.fn.tooltips.defaults = {
            txt: "",
            left: "",
            width:"180"
        }
        var opts = $.extend({}, $.fn.tooltips.defaults, options);
        return this.each(function () {
            $this = $(this);
            $this.css({
                position: "relative"
            }); 
            var elem = ‘<div class="alert-box-small02">‘ + opts["txt"] + ‘</div>‘;  //在对象里面追加提示框
            $this.append(elem);
            var boxWidth = parseInt(opts["width"]);  //获取提示框默认宽度
            var thisWidth = $this.width();
            var divLeft = opts["left"] == "" ? -parseInt((boxWidth - thisWidth) / 2) : opts["left"]; //如果没有设置left值，默认居中
            $this.find(".alert-box-small02").css({  
                bottom: $this.height() + 6,
                left: divLeft + ‘px‘,
                width:opts["width"]
            });
            $this.find(".alert-box-small02").slideDown(100).delay("2000").fadeOut(200);
            setTimeout(function () {  //移除提示框节点
                $this.find(".alert-box-small02").remove();
           }, 2400)
        });
    }
})(jQuery);

css代码：

.alert-box-small02{line-height:35px;background: rgba(0,0,0,.8);position: absolute;height: 35px;display: none;width: 180px;
font-size: 14px;font-weight: bold;color: #FFFFFF;text-align: center;border-radius: 5px;padding:0 10px;bottom: 0;z-index:888;}

调用方法：

$(selector).tooltips({
		txt:"提示框2测试提示框2测试提示框2测试提示框2测试提示框2测试",
		left:"0px"
	});

效果如下：