jquery插件之tip提示框

摘要：提示框插件插件可以满足常用的提示显示，支持个方向，支持边框背景色文本颜色自定义，支持位置微调层级微调宽度间距等参数调整。

插件可以满足常用的提示显示，支持12个方向，支持边框、背景色、文本颜色自定义，支持位置微调、层级微调、宽度间距等参数调整。

tips:提示信息组件

参数：

msg:"asdf",内容

dire:2,方向

w:250,宽度

_x:0,横向偏移

_y:0,纵向偏移

zIndex:100000,层级

borderColor:#FFF,边框颜色

bgColor:#FFF,背景颜色

useHover:true是否使用悬浮显示

color:默认提示文字颜色

padding:边距

(function ($) {
    var defaults = {
        dire: 12,
        w: 250,
        _x: 0,
        _y: 0,
        borderColor: "#FFBB76",
        bgColor: "#FFFCEF",
        color: "#FF0000",
        padding: [5, 10],
        arrWidth: 10,
        useHover: true,
        zIndex: 100000
    };
    $.fn.tips = function (opt) {
        var tip, opts = $.extend({}, defaults, opt);
        if (this[0]) {
            opts.tag = this;
            if (opts.useHover) {
                opts.tag.hover(function () {
                    tip = new Tip(opts);
                    tip.show();
                }, function () {
                    tip.close();
                });
            } else {
                tip = new Tip(opts);
                tip.show();
            }
            return this;
        }
    };
    function Tip(opts) {
        this.dire = opts.dire;
        this.width = opts.w;
        this.zIndex = opts.zIndex;
        this.borderColor = opts.borderColor;
        this.bgColor = opts.bgColor;
        this.color = opts.color;
        this.padding = opts.padding;
        this.arrWidth = opts.arrWidth;
        this.offsetX = opts._x;
        this.offsetY = opts._y;
        this.tag = opts.tag;
        this.msg = opts.msg;
        this.wrap = $("
");
        this.innerArr = $("
");
        this.outerArr = $("
");
        this.init();
    };
    Tip.prototype = {
        init: function () {
            var msg = this.tag.data("tipMsg");
            if (!this.msg) {
                this.msg = msg;
            }
            this.createTemp();
        },
        createTemp: function () {
            var t = this;
            t.createWrap();
            t.setPosition();
        },
        createWrap: function () {
            var t = this;
            t.wrap.html(t.msg);
            var wrapCSS = {
                width: t.width,
                border: "1px solid " + t.borderColor,
                "border-radius": "5px",
                background: t.bgColor,
                color: t.color,
                padding: t.getPadding()
            };
            t.outerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.borderColor));
            t.innerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.bgColor));
            t.wrap.prepend(t.innerArr).prepend(t.outerArr).css(wrapCSS);
            $("body").append(t.wrap);
        },
        setPosition: function () {
            var t = this;
            var posObj = t.getPos(t.dire, t.getPosition(t.tag), t.getPosition(t.wrap), t.arrWidth), pos = posObj.pos, innerPos = posObj.innerPos, outerPos = posObj.outerPos;
            t.wrap.css({top: pos.y, left: pos.x});
            t.innerArr.css({top: innerPos.y, left: innerPos.x});
            t.outerArr.css({top: outerPos.y, left: outerPos.x});
        },
        getPadding: function () {
            var t = this, pad = "0px", padArr = t.padding, len = padArr.length;
            switch (len) {
                case 1:
                    pad = padArr[0] + "px";
                    break;
                case 2:
                    pad = padArr[0] + "px " + padArr[1] + "px";
                    break;
                case 3:
                    pad = padArr[0] + "px " + padArr[1] + "px " + padArr[2] + "px";
                    break;
                case 4:
                    pad = padArr[0] + "px " + padArr[1] + "px " + padArr[2] + "px " + padArr[3] + "px";
                    break;
            }
            return pad;
        },
        getPosition: function (tag) {
            return {t: tag.offset().top, l: tag.offset().left, h: tag.outerHeight(), w: tag.outerWidth()};
        },
        getArrStyle: function (dir, width, color) {
            var style;
            switch (dir) {
                case 11:
                case 12:
                case 1:
                    style = {
                        "border-bottom-style": "solid",
                        "border-width": "0px " + width + "px " + width + "px",
                        "border-bottom-color": color
                    };
                    break;
                case 2:
                case 3:
                case 4:
                    style = {
                        "border-left-style": "solid",
                        "border-width": width + "px 0px " + width + "px " + width + "px",
                        "border-left-color": color
                    };
                    break;
                case 5:
                case 6:
                case 7:
                    style = {
                        "border-top-style": "solid",
                        "border-width": width + "px " + width + "px 0px",
                        "border-top-color": color
                    };
                    break;
                case 8:
                case 9:
                case 10:
                    style = {
                        "border-right-style": "solid",
                        "border-width": width + "px " + width + "px " + width + "px 0px",
                        "border-right-color": color
                    };
                    break;
            }
            return style || {};
        },
        getPos: function (d, tagPos, pos, arrWidth) {
            var _pos, _innerPos, _outerPos, l = tagPos.l, t = tagPos.t, w = tagPos.w, h = tagPos.h, ww = pos.w, hh = pos.h;
            switch (d) {
                case 0:
                case 1:
                    _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t + h + arrWidth};
                    _outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth};
                    _innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth + 1};
                    break;
                case 2:
                    _pos = {x: l - ww - arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
                    _outerPos = {x: ww - 2, y: 20};
                    _innerPos = {x: ww - 2 - 1, y: 20};
                    break;
                case 3:
                    _pos = {x: l - ww - arrWidth, y: t + h / 2 - hh / 2};
                    _outerPos = {x: ww - 2, y: (hh - 2) / 2 - arrWidth};
                    _innerPos = {x: ww - 2 - 1, y: (hh - 2) / 2 - arrWidth};
                    break;
                case 4:
                    _pos = {x: l - ww - arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
                    _outerPos = {x: ww - 2, y: hh - 2 - 20 - arrWidth * 2};
                    _innerPos = {x: ww - 2 - 1, y: hh - 2 - 20 - arrWidth * 2};
                    break;
                case 5:
                    _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t - arrWidth - hh};
                    _outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2};
                    _innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2 - 1};
                    break;
                case 6:
                    _pos = {x: l + w / 2 - ww / 2, y: t - arrWidth - hh};
                    _outerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2};
                    _innerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2 - 1};
                    break;
                case 7:
                    _pos = {x: l + w / 2 - 20 - arrWidth, y: t - arrWidth - hh};
                    _outerPos = {x: 20, y: hh - 2};
                    _innerPos = {x: 20, y: hh - 2 - 1};
                    break;
                case 8:
                    _pos = {x: l + w + arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
                    _outerPos = {x: -arrWidth, y: hh - 2 - 20 - arrWidth * 2};
                    _innerPos = {x: -arrWidth + 1, y: hh - 2 - 20 - arrWidth * 2};
                    break;
                case 9:
                    _pos = {x: l + w + arrWidth, y: t + h / 2 - hh / 2};
                    _outerPos = {x: -arrWidth, y: (hh - 2) / 2 - arrWidth};
                    _innerPos = {x: -arrWidth + 1, y: (hh - 2) / 2 - arrWidth};
                    break;
                case 10:
                    _pos = {x: l + w + arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
                    _outerPos = {x: -arrWidth, y: 20};
                    _innerPos = {x: -arrWidth + 1, y: 20};
                    break;
                case 11:
                    _pos = {x: l + w / 2 - 20 - arrWidth, y: t + h + arrWidth};
                    _outerPos = {x: 20, y: -arrWidth};
                    _innerPos = {x: 20, y: -arrWidth + 1};
                    break;
                case 12:
                    _pos = {x: l + w / 2 - ww / 2, y: t + h + arrWidth};
                    _outerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth};
                    _innerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth + 1};
                    break;
                default:
                    _pos = {x: 0, y: 0};
            }
            return {
                pos: _pos,
                innerPos: _innerPos,
                outerPos: _outerPos
            };
        },
        show: function () {
            this.wrap.show();
        },
        close: function () {
            this.wrap.remove();
        }
    };
})(jQuery);

CSS:

.tip-wrap {
    position: absolute;
    display: none;
}

.tip-arr-a, .tip-arr-b {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border-style: dashed;
    border-color: transparent;
}

page:

    我是测试数据

效果：