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

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”）将适当的类添加到左侧

否则 - >正确的阶级权利....}