jQuery悬停时工具提示的CSS动态位置答案

【问题标题】：CSS dynamic position of tooltip on hover with jQueryjQuery悬停时工具提示的CSS动态位置
【发布时间】：2011-05-20 02:01:18
【问题描述】：

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

无论元素的位置如何，我都希望工具提示框正确显示，在本例中为<a>，它在鼠标悬停事件上显示工具提示。

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

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

谢谢。

更新演示链接

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

【问题讨论】：

如果右侧没有窗口空间，是否要将工具提示向左翻转，

标签： javascript jquery html css tooltip

【解决方案1】：

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

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

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

还有一个窗口宽度，但我总是对差异感到困惑，因此您应该检查哪个可以提供更好的结果。

页面底部的一个例子是：

   //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 高度。

【讨论】：

@Narazana 您可以按照与左派类似的方式进行操作。而是使用 height() 函数。我会用一个例子来编辑答案。
谢谢，维森特。我终于做到了。我刚刚更新了问题以包含jsfiddle.net/Qkwm8/3的最新更新演示
@VincentRamdhanie 亲爱的 Vincent Ramdhanie 你能检查我的问题吗？ STACKOVERFLOW

【解决方案2】：

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

if(($(this).parent()).css('float')) =="right") 在左边添加合适的类

else -> 正确的类 …… }

【讨论】：