jQuery和css3滑动显示tooltips工具提示

PetitQ 对话框/Tips 2018-10-24 2.09K 0 0

这是一款使用 jQuery 和 css3 制作的滑动显示 tooltips 工具提示特效。该 tooltips 工具提示特效以滑动展开的方式显示特定链接的详细信息，整个动画过渡自然，效果非常酷。这个 tooltips 工具提示插件可以从 4 个方向打开：右下（默认）、左下、左上和右上。还可以选择 3 种颜色：绿色（默认）、蓝色和红色。

HTML 结构：

要创建这个 tooltips 工具提示效果，你需要使用 p 标签，这意味着 tooltips 的内容对搜索引擎是可见的。在页面加载的时候，p 标签的内容被用 jQuery 替换为滑动面板中的内容。

也想出现在这里？联系我们吧

```
<div class="main">
```

 <p title="A New Tutorial Every Week" style="top:200px;left:120px;">

  This slideout is going to open to the bottom-right (the default).

```
 </p>
```

 <p title="2200+ Twitter Followers" class="openTop openLeft blue" style="top:400px;left:650px;">

  This slideout is going to open to the top-left.

```
 </p>
```

 <p title="Over 5000 RSS Subscribers" class="openTop red" style="top:500px;left:90px;">

  This slideout is going to open to the top-right.

```
 </p>
```
```
</div>
```

如上所示，每一个标签都带有一个 style 和一个 class。当使用 jQuery 替换滑动面板时，这些属性一起被复制过去。style 属性决定了滑动面板在父元素中的位置，也就是说，滑动面板的位置和 p 标签的位置是相同的。class 属性是可选的，它为滑动面板提供一些可选参数。你可以旋转打开的方向或是面板的颜色。

<div class="slideOutTip openLeft blue" style="left:100px;top:200px">

```
 <div class="tipVisible">
```

  <div class="tipIcon"><div class="plusIcon"></div></div>

  <p class="tipTitle">The title of the slideout</p>

```
 </div>
```
```
 
```
```
 <div class="slideOutContent">
```
```
  <p>Slideout Content</p>
```
```
 </div>
```
```
</div>
```

jQuery和css3滑动显示tooltips工具提示

CSS 样式：

下面只列出了滑动面板的样式：

```
.slideOutTip{
```

 /* The main wrapping div of the slideout tips */

```
 position:absolute;
```
```
 padding:3px;
```
```
 top:0;
```
```
 left:0;
```
```
 background-color:#111;
```
```
 font-size:13px;
```
```
 color:white;
```
```
 overflow:hidden;
```
```
 height:22px;
```
```
}
```
```
 
```
```
.slideOutTip:hover{
```

 /* Applying a CSS3 outer glow on hover */

```
 -moz-box-shadow:0 0 1px #999;
```
```
 -webkit-box-shadow:0 0 1px #999;
```
```
 box-shadow:0 0 1px #999;
```
```
}
```
```
 
```

/* The holder for the title and the icon: */

.tipVisible{ cursor:pointer; height:22px; }

```
 
```
```
.tipTitle{
```
```
 float:left;
```

 font-family:'Myriad Pro',Arial, Helvetica, sans-serif;

```
 font-size:15px;
```
```
 font-weight:bold;
```
```
 white-space:nowrap;
```
```
 line-height:22px;
```
```
 padding-right:5px;
```
```
}
```
```
 
```
```
.tipIcon{
```
```
 width:20px;
```
```
 height:20px;
```
```
 float:left;
```
```
 background-color:#61b035;
```
```
 border:1px solid #70c244;
```
```
 margin-right:8px;
```
```
 
```
```
 /* CSS3 Rounded corners */
```
```
 
```
```
 -moz-border-radius:1px;
```
```
 -webkit-border-radius:1px;
```
```
 border-radius:1px;
```
```
}
```

开始的时候，tooltips 面板只有标题和一个图标是可见的，然后在后面使用 jQuery 为它们绑定 click 事件，当用户点击时滑动面板展开。

```
/* Three color themes */
```

.green .tipIcon{ background-color:#61b035; border:1px solid #70c244; }

.blue .tipIcon{ background-color:#1078C7; border:1px solid #1e82cd; }

.red .tipIcon{ background-color:#CD3A12; border:1px solid #da421a; }

```
 
```
```
.plusIcon{
```
```
 /* The plus icon */
```
```
 width:13px;
```
```
 height:13px;
```

 background:url('img/plus.gif') no-repeat center center;

```
 margin:4px;
```
```
 
```

 /* Defining a CSS3 animation. Currently only works in Chrome and Safari */

 -webkit-transition: -webkit-transform 0.2s linear;

 -moz-transition: -moz-transform 0.2s linear;

```
 transition: transform 0.2s linear;
```
```
}
```
```
 
```
```
.slideOutTip.isOpened{ z-index:10000; }
```
```
 
```
```
.slideOutTip.isOpened .plusIcon{
```

 /* Applying a CSS3 rotation  to the opened slideouts*/

```
 -moz-transform:rotate(45deg);
```
```
 -webkit-transform:rotate(45deg);
```
```
 transform:rotate(45deg);
```
```
}
```
```
 
```

/* Special rules for the left and top - opening versions */

```
 
```
```
.openLeft .tipIcon{
```

 /* Floating the title and the icon to the right */

```
 margin:0 0 0 8px;
```
```
 float:right;
```
```
}
```

.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }

.openLeft .slideOutContent{ margin-top:22px; }

.openLeft.openTop .slideOutContent{ margin-top:0; }

```
 
```
```
.slideOutContent{
```

 /* Hiding the div with the slide out content: */

```
 display:none;
```
```
 padding:10px;
```
```
 font-size:11px;
```
```
}
```
```
 
```

/* Hiding the original paragraphs if they have not been replaced (JS disabled): */

```
 
```
```
.main > p{ display:none; }
```

滑动面板默认的打开方式是草右下方打开，你可以通过设置 openLeft 或 openTop 来改变它的打开方式。你也可以通过 class 来改变图标的颜色。
jQuery和css3滑动显示tooltips工具提示

```
JAVASCRIPT代码：
```

当夜幕加载完毕，jQuery 循环整个 div 中的 p 元素，将它们替换为滑动面板标签。然后根据 style 和 class 为滑动面板绑定 click 事件：

```
$(document).ready(function(){
```

 /* The code here is executed on page load */

```
 
```
```
 /* Replacing all the paragraphs */
```
```
 $('.main p').replaceWith(function(){
```
```
 
```
```
  /*
```

   The style, class and title attributes of the p

```
   are copied to the slideout:
```
```
  */
```
```
 
```
```
  return '\
```

  <div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\

```
   \
```
```
   <div class="tipVisible">\
```

    <div class="tipIcon"><div class="plusIcon"></div></div>\

    <p class="tipTitle">'+$(this).attr('title')+'</p>\

```
   </div>\
```
```
   \
```
```
   <div class="slideOutContent">\
```
```
    <p>'+$(this).html()+'</p>\
```
```
   </div>\
```
```
  </div>';
```
```
 });
```
```
 
```
```
 $('.slideOutTip').each(function(){
```
```
 
```
```
  /*
```

   Implicitly defining the width of the slideouts according to the

   width of its title, because IE fails to calculate it on its own.

```
  */
```
```
 
```

  $(this).width(40+$(this).find('.tipTitle').width());

```
 });
```
```
 
```
```
 /* Listening for the click event: */
```
```
 
```

 $('.tipVisible').bind('click',function(){

```
  var tip = $(this).parent();
```
```
 
```

  /* If a open/close animation is in progress, exit the function */

```
  if(tip.is(':animated'))
```
```
   return false;
```
```
 
```

  if(tip.find('.slideOutContent').css('display') == 'none')

```
  {
```
```
   tip.trigger('slideOut');
```
```
  }
```
```
  else tip.trigger('slideIn');
```
```
 
```
```
 });               
```

 $('.slideOutTip').bind('slideOut',function(){

```
 
```
```
 var tip = $(this);
```

 var slideOut = tip.find('.slideOutContent');

```
 
```

 /* Closing all currently open slideouts: */

 $('.slideOutTip.isOpened').trigger('slideIn');

```
 
```

 /* Executed only the first time the slideout is clicked: */

```
 if(!tip.data('dataIsSet'))
```
```
 {
```
```
  tip .data('origWidth',tip.width())
```
```
   .data('origHeight',tip.height())
```
```
   .data('dataIsSet',true);
```
```
 
```
```
  if(tip.hasClass('openTop'))
```
```
  {
```
```
   /*
```

    If this slideout opens to the top, instead of the bottom,

    calculate the distance to the bottom and fix the slideout to it.

```
   */
```
```
 
```
```
   tip.css({
```

    bottom : tip.parent().height()-(tip.position().top+tip.outerHeight()),

```
    top  : 'auto'
```
```
   });
```
```
 
```
```
   /*
```

    Fixing the title to the bottom of the slideout,

    so it is not slid to the top on open:

```
   */
```

   tip.find('.tipVisible').css({position:'absolute',bottom:3});

```
 
```
```
   /*
```

    Moving the content above the title, so it can

```
    slide-open to the top:
```
```
   */
```

   tip.find('.slideOutContent').remove().prependTo(tip);

```
  }
```
```
 
```
```
  if(tip.hasClass('openLeft'))
```
```
  {
```
```
   /*
```

    If this slideout opens to the left, fix it to the right so

    the left edge can expand without moving the entire div:

```
   */
```
```
   tip.css({
```

    right : Math.abs(tip.parent().outerWidth()-(tip.position().left+tip.outerWidth())),

```
    left : 'auto'
```
```
   });
```
```
 
```

   tip.find('.tipVisible').css({position:'absolute',right:3});

```
  }
```
```
 }
```
```
 
```

 /* Resize the slideout to fit the content, which is then faded into view: */

```
 
```
```
 tip.addClass('isOpened').animate({
```

  width : Math.max(slideOut.outerWidth(),tip.data('origWidth')),

  height : slideOut.outerHeight()+tip.data('origHeight')

```
 },function(){
```
```
  slideOut.fadeIn();
```
```
 });
```

 }).bind('slideIn',function(){ // Binding the slideIn event to .slideOutTip

```
  var tip = $(this);
```
```
 
```

  /* Hide the content and restore the original size of the slideout: */

```
 
```

  tip.find('.slideOutContent').fadeOut('fast',function(){

```
   tip.animate({
```
```
    width : tip.data('origWidth'),
```
```
    height : tip.data('origHeight')
```
```
   },function(){
```
```
    tip.removeClass('isOpened');
```
```
   });
```
```
  });
```
```
 
```
```
 });
```
```
 
```
```
}); /* Closing $(document).ready() */
```

jQuery 和 css3 滑动显示 tooltips 工具提示

已有 522 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

jQuery和css3滑动显示tooltips工具提示

HTML 结构：

CSS 样式：

jQuery 和 css3 滑动显示 tooltips 工具提示

相关文章

响应式jQuery消息通知框和信息提示框插件

纯CSS3背景透明Speech Bubbles对话气泡

jQuery+css3简单实用确认对话框

发表回复取消回复

热销模板

对话框/Tips

HTML 结构：

CSS 样式：

jQuery 和 css3 滑动显示 tooltips 工具提示

相关文章

发表回复 取消回复

热销模板

发表回复取消回复