如何防止popover溢出视口边界？

Question

我正在尝试动态添加注释到Highcharts图表。如果您转到我的Codepen Example并点击图表极限附近的某个数据点，您会看到弹出窗口会被遮挡。

我试图使用bootstrap popover＆＃34; .popover（）＆＃34;为此，但似乎没有办法在鼠标点击时定位弹出窗口。所以我从这个question中得到了一些指示。

$('#popover').css('left', (selected_point.x+15) +'px')
$('#popover').css('top',  (selected_point.y-(selected_point.h/2)-12) +'px')
$('#popover').show()
$("#annotation_text").focus()

我遇到的问题是，当点击其中一个图表边缘附近的数据点时，弹出窗口会被切断。如何防止弹出窗口溢出视口？

我尝试了KrzysztofJaniszewski的建议。然而，弹出窗口仍有一些不良特征。例如，它将在调整大小时从数据点浮动。如果数据滚动，则不会保留数据点。

我决定尝试别的东西。我已将表单放在注释中，该注释在单击时添加到某个点。保存表单后，将删除注释并替换为包含表单数据的新注释。

这有一些很酷的优点，例如由Highcharts处理popover的位置，因此没有边界问题。在调整大小或滚动数据时，表单也会保留其数据点。我更新了Codepen Example以显示这些效果。我忘了分叉Codepen，所以我的原件被覆盖了，抱歉。

此时我试图克服的唯一问题似乎与某种层序或z-index有关。我应用了一些jquery来帮助关注表单输入，但我仍然遇到问题。例如，尝试创建注释或注释。然后尝试用鼠标选择文本。而不是鼠标选择文本，鼠标似乎控制弹出窗口后面的图表，而是缩放图表。

有关如何制作此表单的任何想法都在图表的顶部？它是有意义的，因为它实际上是一个注释，但在这种情况下，最好只覆盖表单。

Answer 1

我在这里制作了CodePen

的副本

它或多或少地以您想要的方式工作。

原则很简单。如果弹出窗口即将离开视口，则更改其位置，使其位于视口内。

...
if (xPos > maxRight) {
    xPos = maxRight;
}
if (yPos > maxDown) {
    yPos = maxDown;
}
...