gene b. gene b. - 6 months ago 17
Javascript Question

Popup Overlay with Context Tooltip in jQuery/CSS

I'm having a surprisingly hard time finding good Help Popup/Overlay solutions. I'm looking for something similar to this eBay Help Icon,

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

enter image description here

I finally settled on the following solution:



FIDDLE: https://jsfiddle.net/bzrnm3y8/9/

It works pretty well and is simple. The solution was given here:
http://stackoverflow.com/a/37244055/1005607

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;

}

Answer

Hmmm... Think I have it now. I moved your paragraph down a bit (50 px) so that you could see the effect.

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>