tooltip gets cut off

Question

I am trying to make a tool-tip that should be appear front of "click me" button. I used offset().top for that. But having below mentioned issue.

1) When i am clicking on bottom buttons tool-tip gets inside the page.
2) I don't want to remove the overflow:hidden from parent div.
3) I want tool-tip should not go inside the container, instead i want tool-tip should move upward before touching the bottom of the container.

Please let me know the work around.

$(".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>

When i click the bottom button, tool-tip should Aligned to the bottom of the page

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

Answer 1

您的问题尚不清楚。但是，如果您的工具提示在下面，那么您可以在CSS中尝试使用z-index。

Answer 2

为了确保.pop不会超过.main的边界打开，您需要使.pop相对定位另请参阅： 如何将div放置在另一个div中