/** * Created by joesbell on 2016/10/8. */;(function($) {    var defaults = {        background:"#000",//tips的背景颜色        color:"white",        position:"r",//出现的位置 l--左边， r--右边  t--顶部  b--底部        parWidth:"",//父级元素的宽度        parHeight:"",//父级元素的高度        tipsJ:"10px",//tips的距离父级距离偏移量        tipsP:"20px",//tips的居中位置偏移量        padding:"10px",//文字提示内边距        txt:"helloWorld",//文字        IconPos:"10px",//小箭头居中位置偏移量        speed:"200",//tips出现的速度延迟    };    function se(){        setTimeout(function () {            $(".tip_JS").remove();        },200)    };    $.fn.JSTips= function(options) {        var options = $.extend({}, defaults, options);        return this.each(function() {            var parentWidth=$(this).width();            var parentHeight=$(this).height();            options.parWidth=parentWidth;            options.parHeight=parentHeight;//                $(this).append(joesO(options));            $(this).on("mouseenter",function () {                $(this).append(joesTips(options));            });            $(this).on("mouseleave",function () {                se();            })        });    };    function joesTips(opts) {        var layEle=$("<div class=‘tip_JS‘></div>");        var layE=$("<div class=‘txt_JS‘></div>");        var cs=$("<i></i>");        var pe=$("<p class=‘tipTxt_JS‘></p>")        var tipsP=parseInt(opts.tipsP);        var tipsJ=parseInt(opts.tipsJ);        var PW=opts.parWidth;        var PH=opts.parHeight;        var position=opts.position;        var bg=opts.background;        var pd=parseInt(opts.padding);        var txt=opts.txt;        var IconPos=opts.IconPos;        var speed=parseInt(opts.speed);        var color=opts.color;        pe.appendTo(layE).css({            padding:pd,        });        pe.html(txt);        layE.appendTo(layEle);        $(".test:after").css({            "border-color":bg        });//            tips出现在右边        if(position=="r"){            layEle.css({                background:bg,                left:PW+tipsJ,                top:tipsP,                color:color            }).show(speed);            cs.addClass("triangle-left").css({                top:IconPos,                "border-right-color":bg            }).appendTo(layE);        }else if(position=="l"){            //            tips出现在左边            layEle.css({                background:bg,                right:PW+tipsJ,                top:tipsP,                color:color            }).show(speed);            cs.addClass("triangle-right").css({                top:IconPos,                "border-left-color":bg            }).appendTo(layE);        }else if(position=="b"){            layEle.css({                background:bg,                top:PH+tipsJ,                left:tipsP,                color:color            }).show(speed);            cs.addClass("triangle-up").css({                left:IconPos,                "border-bottom-color":bg            }).appendTo(layE);            //            tips出现在底部        }else if(position=="t"){            //            tips出现在顶部            layEle.css({                background:bg,                bottom:PH+tipsJ,                left:tipsP,                color:color            }).show(speed);            cs.addClass("triangle-down").css({                left:IconPos,                "border-top-color":bg            }).appendTo(layE);        }        return layEle    }})(jQuery);

/*上箭头*/.triangle-up {    position: absolute;    width:0;    height:0;    bottom: 100%;    border:10px solid transparent;    border-bottom-color:yellow;}/*下箭头*/.triangle-down {    position: absolute;    width:0;    height:0;    top:100%;    /*transform: translate(-50%,-50%);*/    border:10px solid transparent;    border-top-color:yellow;}/*左箭头*/.triangle-left {    position: absolute;    width:0;    height:0;    right: 100%;    border:10px solid transparent;    border-right-color:yellow;}/*右箭头*/.triangle-right {    position: absolute;    width:0;    height:0;    left: 100%;    margin: auto;    /*transform: translate(-50%,0);*/    border:10px solid transparent;    border-left-color:yellow;}.tip_JS{    position: absolute;    display: none;    width: auto;}.txt_JS{    position: relative;}.tipTxt_JS{    white-space: nowrap;}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        .p{            position: relative;            width: 500px;            height: 500px;            background: #000;            margin: 0 auto;            margin-top: 200px;        }    </style>    <link rel="stylesheet" href="./Tips/myTips.css"></head><body><div class="p">    <p style="color: wheat">我的第一个tips插件</p></div></body><script src="jquery-1.12.2.min.js"></script><script src="./Tips/myTips.js"></script><script>    $(".p").JSTips({//        background:"rgba(0,0,0,0.5)",//        position:"l",//        tipsP:"150px",//        txt:"helloWorld",//        IconPos:"10px",//        speed:"200",    });</script></html>