当前位置:Gxlcms > JavaScript > jQuerytip提示插件详解

jQuerytip提示插件详解

时间:2021-07-01 10:21:17 帮助过:9人阅读

本文主要介绍了jQuery tip提示插件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧,希望能帮助到大家。

效果图:

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>document</title>
  6. <style>
  7. .tip{
  8. width: 200px;
  9. text-align: center;
  10. position: relative;
  11. border:1px solid #ccc;
  12. height: 50px;
  13. line-height: 50px;
  14. left: 50%;
  15. margin-top: 50px;
  16. transform: translateX(-50%);
  17. }
  18. .tip-container{
  19. position: absolute;
  20. box-shadow: 2px 2px 5px #f9f9f9;
  21. z-index: 999;
  22. display: none;
  23. }
  24. .tip-container .tip-point-top,
  25. .tip-container .tip-point-bottom,
  26. .tip-container .tip-point-left,
  27. .tip-container .tip-point-right{
  28. border:1px solid #dcdcdc;
  29. position: relative;
  30. background: white;
  31. }
  32. .tip-content{
  33. padding:5px 10px;
  34. background: white;
  35. font-size: 12px;
  36. line-height: 1.7;
  37. font-family: "Helvetica Neue",Helvetica,Arial,"MicroSoft YaHei";
  38. }
  39. .tip-container .tip-point-top::after,
  40. .tip-container .tip-point-top::before,
  41. .tip-container .tip-point-bottom::after,
  42. .tip-container .tip-point-bottom::before{
  43. content:"";
  44. position: absolute;
  45. border:solid transparent;
  46. left: 50%;
  47. width: 0;
  48. height: 0;
  49. transform: translate3d(-50%,0,0);
  50. -webkit-transform: translate3d(-50%,0,0);
  51. }
  52. .tip-container .tip-point-right::after,
  53. .tip-container .tip-point-right::before,
  54. .tip-container .tip-point-left::after,
  55. .tip-container .tip-point-left::before{
  56. content:"";
  57. position: absolute;
  58. border:solid transparent;
  59. top: 50%;
  60. width: 0;
  61. height: 0;
  62. transform: translate3d(0,-50%,0);
  63. -webkit-transform: translate3d(0,-50%,0);
  64. }
  65. /*tip-point-top*/
  66. .tip-container .tip-point-top::after{
  67. border-top-color: #fff;
  68. top: 100%;
  69. border-width: 5px;
  70. }
  71. .tip-container .tip-point-top::before {
  72. border-top-color: #dcdcdc;
  73. top: 100%;
  74. border-width: 7px;
  75. }
  76. /*tip-point-bottom*/
  77. .tip-container .tip-point-bottom::after{
  78. border-bottom-color: #fff;
  79. bottom: 100%;
  80. border-width: 5px;
  81. }
  82. .tip-container .tip-point-bottom::before {
  83. border-bottom-color: #dcdcdc;
  84. bottom: 100%;
  85. border-width: 7px;
  86. }
  87. /*tip-point-right*/
  88. .tip-container .tip-point-right::after{
  89. border-right-color: #fff;
  90. right: 100%;
  91. border-width: 5px;
  92. }
  93. .tip-container .tip-point-right::before {
  94. border-right-color: #dcdcdc;
  95. right: 100%;
  96. border-width: 7px;
  97. }
  98. /*tip-point-left*/
  99. .tip-container .tip-point-left::after{
  100. border-left-color: #fff;
  101. left: 100%;
  102. border-width: 5px;
  103. }
  104. .tip-container .tip-point-left::before {
  105. border-left-color: #dcdcdc;
  106. left: 100%;
  107. border-width: 7px;
  108. }
  109. </style>
  110. </head>
  111. <body>
  112. <p data-tip="寂寞的天下着忧郁的雨" data-mode="top">天堂不寂寞</p>
  113. <p data-tip="天堂不寂寞" data-mode="bottom">寂寞的天下着忧郁的雨</p>
  114. <p data-tip="寂寞的天下着忧郁的雨" data-mode="right">寂寞的天下着忧郁的雨</p>
  115. <p data-tip="天堂不寂寞" data-mode="left">寂寞的天下着忧郁的雨</p>
  116. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  117. <script>
  118. /**
  119. * Created by zxhuan (you@example.com)
  120. * Date: 2016/11/28
  121. * Time: 11:14
  122. */
  123. ;
  124. (function ($,window,document,undefined) {
  125. var modePos;
  126. $.fn.tip = function (options) {
  127. var set = $.extend({
  128. "mode": "bottom",
  129. "speed": 300,
  130. "tipText":"提示内容"
  131. }, options);
  132. if(!modePos){
  133. //策略模式
  134. //算法
  135. modePos = {
  136. top: function (t, tip) {
  137. return {
  138. left: t.offset().left + (t.width() - tip.width()) / 2 + "px",
  139. top: t.offset().top - tip.height() - 12 + "px"
  140. }
  141. },
  142. bottom:function(t, tip){
  143. return {
  144. left: this.top(t, tip).left,
  145. top: t.offset().top + t.height() + 12 + "px"
  146. }
  147. },
  148. left:function(t, tip){
  149. return{
  150. left:t.offset().left - tip.width()-12+ "px",
  151. top:t.offset().top +(t.height()-tip.height())/2+"px"
  152. }
  153. },
  154. right:function(t, tip){
  155. return{
  156. left:t.offset().left +t.width()+12+ "px",
  157. top:t.offset().top +(t.height()-tip.height())/2+"px"
  158. }
  159. }
  160. };
  161. }
  162. function Tip(_this){
  163. var _that = $(_this);
  164. var _mode = set.mode;
  165. var tipText=set.tipText;
  166. var _tip=".tip-container";
  167. if (_that.data("mode")) {
  168. _mode = _that.data("mode");
  169. }
  170. if(_that.data("tip")){
  171. tipText = _that.data("tip");
  172. }
  173. _that.css("cursor", "pointer");
  174. _that.hover(function () {
  175. var _tipHtml = '<p><p class="tip-point-' + _mode + '"><p>' + tipText + '</p></p></p>';
  176. _that.removeAttr("title alt");
  177. $("body").append(_tipHtml);
  178. $(_tip).css(modePos[_mode](_that,$(_tip))).fadeIn(set.speed);
  179. }, function () {
  180. $(".tip-container").remove();
  181. });
  182. }
  183. return this.each(function () {
  184. return new Tip(this);
  185. });
  186. }
  187. })(jQuery,window,document);
  188. $(".tip").tip();
  189. </script>
  190. </body>
  191. </html>

相关推荐:

关于Vue组件实现tips的总结

css中关于几个小tip的示例详解

PHP开发中的tips总结

以上就是jQuery tip提示插件详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行