Question

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

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

我想知道制作工具提示的最佳方法是在不改变内容或大小的情况下永远不会离开屏幕。

编辑：或者不使用其他工具提示库。

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

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

Answer 1

您可以测量工具提示的位置将出现在哪个象限中，然后将工具提示放在另一侧，具体取决于工具提示靠近屏幕的哪个边缘。

例如，如果它位于屏幕的右下角，则工具提示将被定位为使其向上并位于放置区域的左侧。

然而，如果它是屏幕的左上角，工具提示将被定位，使其从放置区域向下并向右。

Answer 2

我想到的第一件事是：

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

Answer 3

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

我使用自己的工具提示库完成了这项工作。这是一个小提琴，单击元素并滚动，这样你就可以看到我的意思了。

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

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

3 个答案: