jquery插件之tip提示框

Tips提示框插件

插件可以满足常用的提示显示，支持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 = $('<div class="tip-wrap"></div>');
        this.innerArr = $('<div class="tip-arr-a"></div>');
        this.outerArr = $('<div class="tip-arr-b"></div>');
        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:

<div class="test">
    <span data-tip-msg="我是测试数据<br>我是测试数据<br>我是测试数据">我是测试数据</span>
</div>

<script>
    $('.test span').tips();
</script>

效果：