如何在小方框中显示信息

Question

我在表单的右侧添加了 [？] ，以显示有关各个字段的信息。我想点击 [？] 后在小框中显示信息。我怎么能这样做？

提前致谢。

Answer 1

我建议您将 tipsy 用于此

Answer 2

我认为您的要求非常简单，我不会使用框架来解决它。 只需在框旁边放一个隐藏元素，然后点击

即可显示

<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();
    });

Answer 3

鉴于您的信息位于HTML元素中，如下所示：

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

你的CSS有一条规则：

 .info-box { display: none; }

然后你的jQuery代码将如下所示：

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

如果我看过实际的HTML，我可以给你一个更具体的答案;也许包括右上角的关闭按钮（您可以使用.hide()方法实现）和一个简单的系统来找出您需要显示的信息框。

在那之前，这应该让你走上正确的轨道。

修改

鉴于你的HTML，我会建议这个解决方案：

将所有帮助元素包含在表格单元格内的<div>内，如下所示：

<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>

您需要的最小CSS将如下所示：

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

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

至于jQuery代码，它将非常简单：

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();
  });
});

我为你做了一个更好的风格示例，在这里：

Working example