使用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高度.