jquery - 另一个网站上的工具提示

Question

我刚刚偶然发现了一个有很好工具提示的网站：https ://www.wetransfer.com/

每当您将鼠标悬停在“i”按钮或“en”按钮上时，您都可以看到工具提示。

关于如何重复这种淡入/淡出效果的任何提示？

Answer 1

你可以在没有 jQuery 的情况下使用 CSS3 - http://jsfiddle.net/cTUgH/3/

HTML

<a href="#">
    i <span> Tooltip Content </span>
</a>

CSS

a {
    display: block;
    margin: 100px;
    height: 30px;
    width: 30px;
    border: 2px solid #aaa;
    background: #eee;
    color: #888;
    line-height: 30px;
    border-radius: 20px;
    text-align: center;
    font: italic bold 16px/30px Georgia;
    text-decoration: none;
    position: relative;
    transition: all .5s ease-in-out;
}

span {
    display: block;
    height: 230px;
    width: 150px;
    border: 2px solid #aaa;
    background: #eee;
    color: #888;
    position: absolute;
    top: -100px;
    left: 55px;
    border-radius: 20px;
    -webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
    opacity: 0;
}

a:hover span {
    opacity: 1;
    left: 40px;
}

Answer 2

这就是使用 jQuery 完成的方式

当然，您可以用一系列不同类型的效果替换效果，例如摇摆、弹跳、缓入缓出等。这取决于您，但 jQuery 版本有 jist。

标记

<div id="mydiv" rel="This is where we hold the tooltip info for ease of use."> Hover this div. </div>

CSS

#mydiv{
  position:relative;
  width:100px;   
}
#tips{
  height:100px;
  width:100px;
  position:absolute;
  top:0;
  left:105px;
  background:#ccc;
  border:1px solid #ccc;
  border-radius:5px;
  padding:5px; 
  opacity:0;
}

jQuery

$(function(){
  $('#mydiv').hover(function(){
    $(this).append('<div id="tips">'+$(this).attr('rel')+'</div>');
    $('#tips').fadeTo(300, 1);
  }, function(){
    $('#tips').fadeTo(300, 0);
    $('#tips', this).remove();
  });
});

编辑

保留原始答案不变，提出了更具体的要求，我将答应。

我不使用动画的“缓出”方法，而是简单地为左侧距离和不透明度设置动画。

我相信这更热衷于你的愿望

Answer 3

AFAIS 他们使用 flash，但同样的效果可以用 jQuery 轻松重现。它具有开箱即用的淡入淡出效果。