Question

我正在编写一个可以保存HTML标记的简单工具提示。请查看http://jsfiddle.net/Qkwm8/了解演示。

我希望工具提示框能够正确显示，无论元素的位置如何<a>，都会显示鼠标悬停事件的工具提示。

工具提示显示正常，除非<a>向右浮动（或位于行尾）或屏幕底部未正确显示，它出现在屏幕外

如果<a>向右浮动，或在行尾，或位于屏幕底部，我希望工具提示改变位置，使其保持可见

谢谢。

更新演示链接

这是完整的结果：http://jsfiddle.net/Qkwm8/3/

Answer 1

您可以使用文档宽度来检查html文档的宽度，并相应地调整左侧位置。说：

    //set  the left position
    var left = $(this).offset().left + 10;
    if(left + 200 > $(document).width()){
        left = $(document).width() - 200;   
    }

我在这里使用了200，因为你将工具提示设置为200px宽。可以用高度做类似的事情。

还有一个窗口宽度，但我总是对差异感到困惑，所以你应该检查哪一个给你更好的结果。

页面底部的一个例子是：

   //set the height, top position
    var height = $(this).height();
    var top = $(this).offset().top;
    if(top + 200 > $(window).height()){
        top = $(window).height() - 200 - height;
    }

再次使用200，因为您将工具提示设置为200px高度。

Answer 2

$（'a.show-tooltips'）。mouseover（function（）{

if（（$（this）.parent（））。css（'float'））==“right”）将正确的类添加到左侧

其他 - ＆gt;适当的阶级权利 .... }

使用jQuery悬停工具提示的CSS动态位置

2 个答案: