溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery中如何使用tip提示插件

發(fā)布時(shí)間：2021-08-23 11:43:59 來源：億速云 閱讀：158 作者：小新 欄目：web開發(fā)

小編給大家分享一下jQuery中如何使用tip提示插件，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

效果圖：

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":"提示內(nèi)容"
   }, 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>

看完了這篇文章，相信你對(duì)“jQuery中如何使用tip提示插件”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手