弹出覆盖与jQuery / CSS中的上下文工具提示

Question

我很难找到好的帮助弹出/覆盖解决方案。我正在寻找类似于此eBay帮助图标的内容：

http://www.ebay.com/itm/Dell-D2015HM-19-5-Full-HD-LED-Backlit-1920x1080-60Hz-25ms-VGA-Brand-New-/252376174885?hash=item3ac2cad125:g:j0AAAOSw1DtXJ5lK

Answer 1

嗯......想想我现在拥有它。我把你的段落向下移动了一点（50像素），这样你就可以看到效果了。

function deselect(e) {
  $('#helpbox').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('.helpicon').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('#helpbox').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

#helpbox {
    background: url(http://www.rachelgallen.com/images/background2.png) no-repeat transparent;
    min-height: 75px;
    /*max-height: 100px;    comment back these 2 lines 
    overflow-y: auto;*/     to fix the max height thing
    width:355px;
    left:230px;
    position: relative;
    padding-top: 25px;
    padding-bottom: 10px;
    margin-top:-60px;
}

#helpbox .close
{background: url(http://www.rachelgallen.com/images/close2.png) no-repeat transparent;
    height: 14px;
    width: 14px;
    top: 20px;
    right: 15px;
    position: absolute;
    display: block;
    cursor: pointer;}

#helpbox p{
  padding-left:50px!important;
   width:300px!important;
  height:auto;}
  
p.info{margin-top:50px;}
p.info, a.helpicon{display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info">Click to show help popup overlay 
</p>

<a class="helpicon" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/VisualEditor_-_Icon_-_Help.svg/2000px-VisualEditor_-_Icon_-_Help.svg.png" width=15 height=15 />
</a>

<div id="helpbox">
<i class ="close" title="Close"></i>
<p> Estimated delivery dates include seller's handling time, origin ZIP Code, destination ZIP Code and time of acceptance and will depend on shipping service selected and receipt of cleared payment.  Delivery times may vary, especially during peak periods.</p>
</div>

Answer 2

（代表问题作者发布）。

我终于确定了以下解决方案（JS Fiddle）。

效果很好，很简单。解决方案是given here。

JS：

$(function () {
            $('.helpicon').on('click', function () {
                if ($(this).hasClass('selected')) {
                    $(this).siblings('.helpbox').slideToggle();
                } else {
                    $(this).addClass('selected');
                    $(this).siblings('.helpbox').slideToggle();
                }
                return false;
            });

        });

CSS：

.helpicon {
  position: relative;
}

.helpbox {
    background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 15px 15px 15px;

}