JQuery - Position Popup in relative to button(s)

Question

I'm trying to position a popup relative to its button or the button that is clicked with jquery. I'd like to position the popup in a way that doesn't cover up the button itself. Position it to the left, right, above or below the button that is clicked.

Now I know I can do this by writing more html popups and css but there got to be a way to dynamically use one div and position it with jquery. I tried using offsets and position (at one point) but I couldn't get it to work. Frankly, I'm very entry level with js and jquery so forgive my noobness.

Any help would be greatly appreciated!!

JS:

 $('.trends').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');
     /* if I add this and zero out the positioning via css the pop gets offset but its way far away from this parent.
     var offset = $(this).offset();
                $('.questions').css('left',offset.left);    
                $('.questions').css('top',offset.top);*/

 });

 $('.consumer').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>Even though we have low inflation, consumers are not increasing their spending. Why?</p>');
 });

 $('.industry').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>What factors drove crude oil prices to fall and which industries benefited?</p>');
 });

 $('.henn').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>MESSAGE FROM OUR PRESIDENT</p>');
     var offset = $(this).offset();
 $('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');

 });
 $('.equity').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>The U.S. stock market has been rising for more than six years. What do you see ahead for equities?</p>');
 });

 $('.balance').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>what does it look like for companies balance sheets?</p>');
 });


 $('.close').click(function (e) {
     e.stopPropagation();
     $(this).parent().hide();
     $('.items').removeClass('no-effect');

 });

jsFiddle

Answer 1

Create a separate function to display the question, which takes the clicked button and the question as parameters:

function showQuestion(button, question) {
  var offset = button.offset();
  $('.question').html(question);

  $('.questions')
    .fadeIn()
    .css({
      left: Math.min(offset.left, $(window).innerWidth()-$('.questions').outerWidth()),
      top: offset.top + button.innerHeight()
    });
}

Call it like this:

$('.trends').click(function () {
  showQuestion(
    $(this), 
    '<p>What trends could potentially drive growth in the U.S.?</p>'
  );
});

Updated Fiddle

The css left calculation ensures that the question will always be on-screen.

Answer 2

Part of your problem was .filter being set to position: relative;.

If an absolute positioned element has a relative positioned parent the absolute element will be positioned in relation to the parent not the document.

If you remove that it gets a little easier to use .offset() to position the question:

Working Example

 $('.trends').click(function () {
     $('.questions').fadeIn();
     $('.question').html('<p>What trends could potentially drive growth in the U.S.?</p>');
     /* See change here*/
     var offset = $(this).offset();
     $('.questions').css('top', offset.top + $(this).height());

 });

.filter {
    width: 98.1481481481%;
    float: left;
    margin-left: 0.9259259259%;
    margin-right: 0.9259259259%;
    margin-bottom: 10px;
    /*position: relative; see change here */
}