当前位置:秋叶网络博客 前端设计 ◊ 功能齐全好用的tooltip jquery插件

功能齐全好用的tooltip jquery插件

作者:秋叶 发表时间:2017年11月10日

这是一个本人自己写的基于jquery的提示插件,只有js,不需要引入css等其他文件,只需在引入jq的前提下,把这段代码引入你的网站,你就可以通过调用jq其它方法一样使用本插件,主要功能就是tooltip,提示框组建,自定义参数配置功能包括,设置宽高,设置字体颜色,设置边框颜色,设置字体大小,设置浮动位置,设置事件类型,提示框背景。
tooltip插件
代码:

(function($){
 $.fn.tooltip = function(option){
 /*
 * 提示框jq插件
 * Author by 秋叶博客 http://www.mizuiren.com/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"
});
目录: 前端设计 | 标签: , | 5976次阅读