工具提示被切断答案

【问题标题】：tooltip gets cut off工具提示被切断
【发布时间】：2015-05-30 18:39:15
【问题描述】：

我正在尝试制作一个应该出现在“点击我”按钮前面的工具提示。我为此使用了 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

【问题讨论】：

您的问题是什么？是“有人请为我的规范编写代码”吗？
单击底部按钮时，.pop 应该出现在哪里？与页面底部对齐？与按钮的上边缘对齐？这里有很多可能的答案。
想让它与页面底部对齐
@amphetamachine ..想让它与页面底部对齐
如果您也将 html 添加到此问题中会很有帮助。您甚至可以通过编辑字段上方的按钮在此处制作功能齐全的 sn-p。

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：