I have added [?] in right side of the form to show information about respective fields. I want to show information in small box after clicking [?]. How can i do that?

Thanks in advance.

I have added [?] in right side of the form to show information about respective fields. I want to show information in small box after clicking [?]. How can i do that?

Thanks in advance.

• javascript
• jquery
• html

• 2 hide the box with display:none; then trigger to show it when the user click the [?] , something like this $('#info').click(function(){ $('#infobox').show(); }); – Drixson Oseña Commented Jul 26, 2013 at 2:50

3 Answers 3

Given that your information is in an HTML element like so:

 <div class="info-box">
      Lorem ipsum dolor sit amet, consectetur adipiscit elit
      Cras in.
 </div>

And your CSS has a rule like:

 .info-box { display: none; }

Then your jQuery code will look like this:

 jQuery(document).ready(function($){
      $('.help').on('click', function(){
            $('.info-box').show();
      })
 });

If I had seen the actual HTML, I could give you a more specific answer; perhaps including a close button in the upper-right (which you would implement with the .hide() method) and a simple system to find out which info-box you need to show.

Until then, this should get you on the right track.

Edit

Given your HTML, I would suggest this solution:

Wrap all your help elements inside a <div> inside your table-cell, like so:

<div class="help">
    <div class="info-box">
         <a href="#" class="close-button">&times;</a>
         Lorem ipsum dolor sit amet, consectetur adipiscit elit
         Cras in.
    </div>
    <a class='help-button' href='#' title="Click to know more">[?]</a>
</div>

The minimal CSS you will need, will look like this:

.help {
    display:  inline-block;
    position: relative;
}

.info-box {
    width:    150px;
    position: absolute;
    right:    -170px;
}

As for the jQuery code, it's going to be very simple:

jQuery(document).ready(function($){
  $('.help-button').on('click', function(e){
    e.preventDefault();
    $(this).siblings('.info-box').show();
  });
  
  $('.close-button').on('click', function(e){
    e.preventDefault();
    $(this).parents('.info-box').hide();
  });
});

I have made a better styled example for your, here:

Working example

I would remend you to use tipsy for this

I think your requirements are so simple that I wouldn't use a framework to solve it. Just put a hidden element next to the box and show it on click

<div style="display:none" id="helpText" class="helptTextBox">
    <div class="closeIcon">X</div>
</div>

$('#questionBox').click(
  function(){
    $("#helpText").show();
  });



$('.closeIcon').click(
    function(){
        $(this).closest(".helptTextBox").hide();
    });