jQuery tip提示插件（实例分享）

更新时间：2017年04月28日 09:53:50 作者：longqd

本篇文章主要介绍了jQuery tip提示插件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

先声明，我也是学了某位大神的...

效果图：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>document</title>
 <style>
  .tip{
   width: 200px;
   text-align: center;
   position: relative;
   border:1px solid #ccc;
   height: 50px;
   line-height: 50px;
   left: 50%;
   margin-top: 50px;
   transform: translateX(-50%);
  }
  .tip-container{
   position: absolute;
   box-shadow: 2px 2px 5px #f9f9f9;
   z-index: 999;
   display: none;
  }
  .tip-container .tip-point-top,
  .tip-container .tip-point-bottom,
  .tip-container .tip-point-left,
  .tip-container .tip-point-right{
   border:1px solid #dcdcdc;
   position: relative;
   background: white;
  }
  .tip-content{
   padding:5px 10px;
   background: white;
   font-size: 12px;
   line-height: 1.7;
   font-family: "Helvetica Neue",Helvetica,Arial,"MicroSoft YaHei";
  }
  .tip-container .tip-point-top::after,
  .tip-container .tip-point-top::before,
  .tip-container .tip-point-bottom::after,
  .tip-container .tip-point-bottom::before{
   content:"";
   position: absolute;
   border:solid transparent;
   left: 50%;
   width: 0;
   height: 0;
   transform: translate3d(-50%,0,0);
   -webkit-transform: translate3d(-50%,0,0);
  }

  .tip-container .tip-point-right::after,
  .tip-container .tip-point-right::before,
  .tip-container .tip-point-left::after,
  .tip-container .tip-point-left::before{
   content:"";
   position: absolute;
   border:solid transparent;
   top: 50%;
   width: 0;
   height: 0;
   transform: translate3d(0,-50%,0);
   -webkit-transform: translate3d(0,-50%,0);

  }
  /*tip-point-top*/
  .tip-container .tip-point-top::after{
   border-top-color: #fff;
   top: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-top::before {
   border-top-color: #dcdcdc;
   top: 100%;
   border-width: 7px;
  }
  /*tip-point-bottom*/
  .tip-container .tip-point-bottom::after{
   border-bottom-color: #fff;
   bottom: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-bottom::before {
   border-bottom-color: #dcdcdc;
   bottom: 100%;
   border-width: 7px;
  }
  /*tip-point-right*/
  .tip-container .tip-point-right::after{
   border-right-color: #fff;
   right: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-right::before {
   border-right-color: #dcdcdc;
   right: 100%;
   border-width: 7px;
  }
  /*tip-point-left*/
  .tip-container .tip-point-left::after{
   border-left-color: #fff;
   left: 100%;
   border-width: 5px;
  }
  .tip-container .tip-point-left::before {
   border-left-color: #dcdcdc;
   left: 100%;
   border-width: 7px;
  }
 </style>
</head>
<body>
<div class="tip" data-tip="寂寞的天下着忧郁的雨" data-mode="top">天堂不寂寞</div>
<div class="tip" data-tip="天堂不寂寞" data-mode="bottom">寂寞的天下着忧郁的雨</div>
<div class="tip" data-tip="寂寞的天下着忧郁的雨" data-mode="right">寂寞的天下着忧郁的雨</div>
<div class="tip" data-tip="天堂不寂寞" data-mode="left">寂寞的天下着忧郁的雨</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
 /**
  * Created by zxhuan (you@example.com)
  * Date: 2016/11/28
  * Time: 11:14
  */
 ;
 (function ($,window,document,undefined) {
  var modePos;
  $.fn.tip = function (options) {
   var set = $.extend({
    "mode": "bottom",
    "speed": 300,
    "tipText":"提示内容"
   }, options);
   if(!modePos){
    //策略模式
    //算法
    modePos = {
     top: function (t, tip) {
      return {
       left: t.offset().left + (t.width() - tip.width()) / 2 + "px",
       top: t.offset().top - tip.height() - 12 + "px"
      }
     },
     bottom:function(t, tip){
      return {
       left: this.top(t, tip).left,
       top: t.offset().top + t.height() + 12 + "px"
      }
     },
     left:function(t, tip){
      return{
       left:t.offset().left - tip.width()-12+ "px",
       top:t.offset().top +(t.height()-tip.height())/2+"px"
      }
     },
     right:function(t, tip){
      return{
       left:t.offset().left +t.width()+12+ "px",
       top:t.offset().top +(t.height()-tip.height())/2+"px"
      }
     }
    };
   }
   function Tip(_this){
    var _that = $(_this);
    var _mode = set.mode;
    var tipText=set.tipText;
    var _tip=".tip-container";
    if (_that.data("mode")) {
     _mode = _that.data("mode");
    }
    if(_that.data("tip")){
     tipText = _that.data("tip");
    }
    _that.css("cursor", "pointer");
    _that.hover(function () {
     var _tipHtml = '<div class="tip-container"><div class="tip-point-' + _mode + '"><div class="tip-content">' + tipText + '</div></div></div>';
     _that.removeAttr("title alt");
     $("body").append(_tipHtml);
     $(_tip).css(modePos[_mode](_that,$(_tip))).fadeIn(set.speed);
    }, function () {
     $(".tip-container").remove();
    });
   }
   return this.each(function () {
    return new Tip(this);
   });
  }
 })(jQuery,window,document);
 $(".tip").tip();
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家!

您可能感兴趣的文章:

通过jquery实现页面的动画效果(实例代码)
下面小编就为大家带来一篇通过jquery实现页面的动画效果(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
基于jquery的复制网页内容到WORD的实现代码
基于jquery的复制网页内容到WORD的实现代码，需要的朋友可以参考下。
2011-02-02
基于jQuery实现的美观星级评论打分组件代码
这篇文章主要介绍了基于jQuery实现的美观星级评论打分组件代码,涉及jQuery回调函数及页面元素属性动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
jquery下div 的resize事件示例代码
这篇文章主要介绍了某位大神写的jquery下div 的resize事件,需要的朋友可以参考下
2014-03-03
jquery click([data],fn)使用方法实例介绍
大概意思就是触发每一个匹配元素的click事件，本文通过一个实例为大家详细介绍下jquery click([data],fn)的使用方法，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
jquery放大镜效果超漂亮噢
放大镜效果想必大家都有见到过吧，就是图片的局部放大，下面有个不错的这个放大镜的代码挺简单滴效果也不错，感兴趣的朋友可以练练手
2013-11-11
jQuery插件开发基础简单介绍
jquery插件开发基础：开发jQuery 插件的基本格式,开发全局函数的基本格式，接下来为您详细介绍，感兴趣的朋友可以了解哦
2013-01-01
js实现图片放大缩小功能后进行复杂排序的方法
这是一个基于jquery的图片效果，它的作用是：当图片点击变大(变小)时，其它图片按照一定的规则进行排序运动
2012-11-11
jQuery仿移动端支付宝键盘的实现代码
最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。项目只是单纯的手机网站，所以这个功能由前端来实现，下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码，需要的朋友参考下吧
2018-08-08
jquery不常用方法汇总
本文给大家汇总介绍了几个jQuery中不常用的方法，记录一下，分享给大家，有需要的小伙伴可以参考下。
2015-07-07

jQuery tip提示插件（实例分享）

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具