工具提示被切断了

Question

我正在尝试制作一个应该出现在“click me”按钮前面的工具提示。我使用了offset（）。top。但是有下面提到的问题。

1）当我点击底部按钮时，工具提示进入页面。
2）我不想删除溢出：从父div中隐藏 3）我希望工具尖端不要进入容器内部，而是希望工具尖端在接触容器底部之前向上移动。

请让我了解相关工作。

$(".main").on("click", "button", function(){
  var top = $(this).offset().top;
  $(".pop").show(".pop");
  $(".pop").css("top", top)

})

$(".pop").click(function(){
  $(this).css("display", "none")
})

HTML：

<div class="main">  
  <table width="100%">
  <tr>
    <td width="50%">Text</td>
    <td width="50%"><button type="button">Click Me!</button></td>
  </tr>

  <tr>
    <td colspan="2">
      <div class="pop">
        <a class="close" href="#">Close</a>
      </div>
 </td>
    </tr>
</table>
</div>

当我点击底部按钮时，工具提示应该与页面底部对齐

http://codepen.io/anon/pen/yyZdqO

Answer 1

你的问题不明确。但如果你的工具提示在下面，那么你可以在你的CSS中尝试z-index。

Answer 2

为了确保.pop不会打开.main的边框，你需要使.pop相对定位 另请参阅：How to position divs within another div