如何允许div box在屏幕内显示(不截断)

Question

flotchart.org)用于散点图图形应用程序。

在plotover事件下，我显示了一个工具提示，通过一个函数动态显示，该函数使得：

$('<div id="tooltip" class="tooltip">' + contents + '</div>') 
  .css({
  top: absoluteY,
  left: absoluteX,
} ).appendTo("body");

顺便说一下，CSS文件中的CSS Id描述为：

.tooltip {
  z-index:1000;
  display:none;
  position:absolute;
  padding:10px;
  margin:1em 0 3em;
  border:5px solid #6B6B6B;
  color:#333;
  background:#fff;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;     
  opacity: 0.87
}

有没有人可以帮我理解一下，是否有一些CSS属性需要调整才能让工具提示框显示在屏幕内？顺便说一句，盒子尺寸自动调整是可以的，截断是不行的。

请看这里的截图：

屏幕截图1：tooltip correctly displayed if inside the parent div

屏幕截图2：tooltip TRUNCATED when the point is near the screen (div?) right margin

很抱歉我对CSS一无所知/非常感谢！乔治

Answer 1

尝试将z-index:1000;添加到tooltip css中，这应该允许tooltip div位于页面上的任何其他内容之上。

Answer 2

用于父级的overflow: visible将解决此问题