Question

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

只要将鼠标悬停在“i”按钮或“en”按钮上，就可以看到工具提示。

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

Answer 1

你可以在没有CSS3的情况下使用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

This is how it's done with jQuery

当然，你可以用不同类型的数组替换效果，例如swing，bounce，easy-in-ease-out等等。这取决于你，但是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();
  });
});

修改

原始答案保持不变，提出了更具体的要求，我将要承担责任。

我没有对动画使用'缓出'方法，相反，我只是为左边距离和不透明度设置动画。

I believe this is more keen to what you desire

Answer 3

AFAIS他们使用flash，但是使用jQuery可以很容易地重现相同的效果。它具有开箱即用的淡入淡出效果。

另一个网站上的工具提示

3 个答案: