功能齐全好用的tooltip jquery插件
作者:秋了秋 发表时间:2017年11月10日
这是一个本人自己写的基于jquery的提示插件,只有js,不需要引入css等其他文件,只需在引入jq的前提下,把这段代码引入你的网站,你就可以通过调用jq其它方法一样使用本插件,主要功能就是tooltip,提示框组建,自定义参数配置功能包括,设置宽高,设置字体颜色,设置边框颜色,设置字体大小,设置浮动位置,设置事件类型,提示框背景。 代码:
(function($){ $.fn.tooltip = function(option){ /* * 提示框jq插件 * Author by 秋叶博客 //netblog.cn/blog/494.html * option参数 * { * background: "#ddd",(option可选) * position: "top|left|bottom|right",(option可选) * content: "这是实例提示文字!",(needed必选) * event: "hover|click",(event type事件类型, 可选) * color: "#3c4751"(font color文字颜色) * borderColor: "#ddd",(color 颜色 option可选) * fontSize: "14px",(font size 字号 option可选) * width:"200px",(width 宽度 option可选) * height:"auto"(height 高度 option可选) * } * */ if(!$.isPlainObject(option)){ return console.error("tooltip传参类型居然不是个纯对象!"); } var _this = this, $tipContent; option.borderColor = option.borderColor || "#ddd"; option.color = option.color || "#444"; option.fontSize = option.fontSize || "14px"; option.width = option.width || "auto"; option.height = option.height || "auto"; option.background = option.background || "#fff"; function createTip(_this){ $tipContent && $tipContent.remove(); var timeId = "qiuye-tooltip-" + new Date().getTime(); $("body").append('<div id="'+ timeId +'" style="display:none;"><div class="qiuye-con"></div><i></i><i></i><style>#'+timeId+'{z-index:9999;border-radius:3px;position: absolute; padding: 5px 10px; display: inline-block;width: '+option.width+';height: '+option.height+'; min-width: 100px; word-break: break-all; background: rgb(255, 255, 255); border: 1px solid '+option.borderColor+';font-size:'+option.fontSize+';color:'+option.color+';} #'+timeId+' i{position:absolute;display:inline-block;}</style></div>'); $tipContent = $("#" + timeId); var $angle = $("i",$tipContent), $angle1 = $angle.eq(0), $angle2 = $angle.eq(1), $angleSize = 8; $(".qiuye-con",$tipContent).html(option.content || _this.attr("title") || ""); var eleVar = { width: _this.outerWidth(), height: _this.outerHeight(), left: _this.offset().left, top: _this.offset().top } var tipVar = { width: $tipContent.outerWidth(), height: $tipContent.outerHeight() } var position = {}, offset = $angleSize * 2; //Set tip container position and style(设置消息提示框的位置以及样式) if(!option.position){ option.position = "top"; } switch (option.position){ case "top": position.top = eleVar.top - tipVar.height - offset + "px"; position.left = eleVar.left - tipVar.width/2 + eleVar.width/2 + "px"; break; case "bottom": position.top = eleVar.top + eleVar.height + offset + "px"; position.left = eleVar.left - tipVar.width/2 + eleVar.width/2 + "px"; break; case "left": position.top = eleVar.top + eleVar.height/2 - tipVar.height/2 + "px"; position.left = eleVar.left - tipVar.width - offset + "px"; break; case "right": position.top = eleVar.top + eleVar.height/2 - tipVar.height/2 + "px"; position.left = eleVar.left + eleVar.width + offset + "px"; break; default: position.top = eleVar.top - tipVar.height - offset + "px"; position.left = eleVar.left - tipVar.width/2 + eleVar.width/2 + "px"; break; } position.background = option.background; $tipContent.css(position); //Set angle position and style(设置指示三角的位置以及样式) var angleStyle1 = {}, angleStyle2 = {}; if(option.position === "left"){ angleStyle1.right = "-" + ($angleSize) + "px"; angleStyle2.right = "-" + ($angleSize - 1) + "px"; }else if(option.position === "right"){ angleStyle1.left = "-" + ($angleSize) + "px"; angleStyle2.left = "-" + ($angleSize - 1) + "px"; }else if(option.position === "top"){ angleStyle1.bottom = "-" + ($angleSize) + "px"; angleStyle2.bottom = "-" + ($angleSize - 1) + "px"; }else if(option.position === "bottom"){ angleStyle1.top = "-" + ($angleSize) + "px"; angleStyle2.top = "-" + ($angleSize - 1) + "px"; } if(option.position === "left" || option.position === "right"){ $angle.css({ "top": "50%" }); $angle1.css($.extend({ "margin-top": "-" + $angleSize + "px", "border-top": $angleSize + "px solid transparent", "border-bottom": $angleSize + "px solid transparent" },angleStyle1, option.position === "left" ? { "border-left": $angleSize + "px solid " + option.borderColor } : { "border-right": $angleSize + "px solid " + option.borderColor, })); $angle2.css($.extend({ "margin-top": "-" + ($angleSize-1) + "px", "border-top": $angleSize-1 + "px solid transparent", "border-bottom": $angleSize-1 + "px solid transparent" },angleStyle2, option.position === "left" ? { "border-left": $angleSize-1 + "px solid " + option.background } : { "border-right": $angleSize-1 + "px solid " + option.background })); }else if(option.position === "top" || option.position === "bottom"){ $angle.css({ "left": "50%" }); $angle1.css($.extend({ "margin-left": "-" + $angleSize + "px", "border-left": $angleSize + "px solid transparent", "border-right": $angleSize + "px solid transparent" },angleStyle1, option.position === "top" ? { "border-top": $angleSize + "px solid " + option.borderColor } : { "border-bottom": $angleSize + "px solid " + option.borderColor })); $angle2.css($.extend({ "margin-left": "-" + ($angleSize-1) + "px", "border-left": $angleSize-1 + "px solid transparent", "border-right": $angleSize-1 + "px solid transparent" },angleStyle2, option.position === "top" ? { "border-top": $angleSize + "px solid " + option.background } : { "border-bottom": $angleSize + "px solid " + option.background })); } } //Bind event(绑定事件) if(option.event){ $(window).on(option.event+".qiuye",function(e) { e = e || window.event; var index = Array.prototype.slice.call(_this).indexOf(e.target); if(index>-1) { createTip($(_this[index])); $tipContent.fadeIn(200); } else { $tipContent && $tipContent.remove(); } }); }else{ Array.prototype.slice.call(_this).forEach(function(item,index){ createTip($(item)); $tipContent.fadeIn(200); }) } return _this; } }(jQuery));
使用:
<a id="qiuye-shang">鼠标悬浮上面显示提示</a> $("#qiuye-shang").tooltip({ position: "top", content: '这里放文本', background: "#3c4751", event: "hover", color: "yellow" });
10
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/494.html