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

I'm writing a simple tooltip that can hold HTML tags. Please check http://jsfiddle.net/Qkwm8/ for the demo.

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

I want the tooltip box to show properly regardless of the position of element, in this case <a>, that shows tooltips on mouseover event.

我希望工具提示框能够正确显示,无论元素的位置如何,在本例中为,它显示了鼠标悬停事件的工具提示。

The tooltips are shown fine except when <a> floats right (or is at the end of the line) or at the bottom of the screen where it doesn't show properly, it appears off the screen

工具提示显示正常,除非浮动正确(或位于行尾)或屏幕底部没有正确显示,它出现在屏幕外

If the <a> floats right, or at the end of the line, or is at the bottom of the screen, I want the tooltip to change position so it remains visible

如果浮动正确,或在行的末尾,或位于屏幕的底部,我希望工具提示改变位置,使其保持可见

Thank you.

Update demo link

更新演示链接

here's the complete result: http://jsfiddle.net/Qkwm8/3/

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

2 个解决方案

#1

You can use the document width to check how wide the html document is and adjust the left position accordingly. Say:

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

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

I used 200 here because you are setting your tooltip to 200px wide. Something similar can be done with height.

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

There is also a window width but I always get confused about the difference so you should check which one gives you better results.

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

An example of the bottom of the page is:

页面底部的一个示例是:

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

Again, using 200 since you are setting your tooltip to 200px height.

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

#2

$('a.show-tooltips').mouseover(function() {

if(($(this).parent()).css('float')) =="right") add the proper class to left

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

else -> the proper class the right .... }

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

#1