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

时间:2012-11-13 10:26:02

标签: jquery css html tooltip

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

在一个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无知/非常感谢! 乔治

2 个答案:

答案 0 :(得分:0)

尝试将z-index:1000;添加到工具提示css中,这应该允许工具提示div位于页面上的任何其他位置。

答案 1 :(得分:0)

父母的

overflow: visible将解决此问题