如何创建一个永远不会离开屏幕的html工具提示

How to create an html tooltip that never goes off screen?

本文关键字：屏幕 离开 工具提示 html 一个 何创建 创建 永远      更新时间：2023-09-26

我正在创建一个用于教育目的的工具提示。

假设工具提示可以在页面上的任何位置动态创建。

我想知道最好的方法，使工具提示定位在这样的方式，永远不会离开屏幕而不改变其内容或大小。

编辑:或者不使用另一个工具提示库。

.has-tooltip:hover ~ div {
    display: block;
}

编辑:在某些情况下可能离开屏幕的工具提示的例子:http://jsfiddle.net/n94rv/13/embedded/result/

您可以测量工具提示将出现在哪个象限，然后根据工具提示靠近屏幕的哪个边缘将工具提示放置在不同的一侧。

例如，如果它在屏幕的右下角，那么工具提示的位置应该是在放置区域的左上方。

然而，如果它位于屏幕的左上角，那么工具提示的位置就会从放置区域向右向下。

我首先想到的是:

  • 用css规则:visbility:hidden; position:absolute;
    • 将提示添加到DOM中
  • 获取其大小
  • 如果离开屏幕边界，改变它的位置
  • 显示它

如果它是一个工具提示指向一个元素，它最终会离开屏幕，因为当工具提示指向的元素离开屏幕时，指针最终也会离开屏幕。

我已经用我自己的工具提示库做到了这一点。这是一个小提琴，点击元素并滚动，这样你就明白我的意思了。

http://jsfiddle.net/bEv7N/

new jBox('Tooltip', {
    attach: $('#tooltip'),
    trigger: 'click',
    position: {
        x: 'right',
        y: 'center'
    },
    outside: 'x',
    content: 'My Tooltip',
    adjustPosition: true,
    adjustTracker: true,
    height: 200
});

同样适用于工具提示在顶部，那么你必须翻转它:

http://jsfiddle.net/bEv7N/1/

new jBox('Tooltip', {
    attach: $('#tooltip'),
    trigger: 'click',
    position: {
        x: 'center',
        y: 'top'
    },
    outside: 'y',
    content: 'My Tooltip',
    adjustPosition: true,
    adjustTracker: true,
    width: 100
});

再次单击该元素以显示工具提示，然后滚动。你看，它不会一直留在屏幕上，你所能做的就是试着调整它的属性，使它尽可能地可见。

另一件需要考虑的事情是，这种行为是相当一个性能杀手，因为计算必须在运行时(滚动时)完成。这意味着你应该有一个关闭它们的选项。在我的库中，它只会在工具提示打开时被触发，对于滚动和窗口大小调整，你必须特别打开它。

例如，在我的库中，我添加了以下选项: 
    adjustPosition: true,
    adjustTracker: true,

请随意从我的工具提示库中窃取一些代码，如果有帮助，您可以在github上找到它:https://github.com/StephanWagner/jBox

相关文章：