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

问题描述：

我正在写一个简单的可以容纳HTML标签的工具提示。演示请检查http://jsfiddle.net/Qkwm8/。jQuery悬停工具提示的CSS动态位置

我希望工具提示框能够正确显示，无论元素的位置如何，在本例中为<a>，它显示mouseover事件的工具提示。

工具提示示除了<a>漂浮时右（或是在该行的末端），或在屏幕的底部并在没有正确显示细，它出现了屏幕

如果<a>漂浮在右边，或者在行尾，或者位于屏幕的底部，我希望工具提示更改位置以便它保持可见

谢谢。

更新演示链接

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

做你想做的工具提示翻转到左侧，如果有在右手边没有窗户的空间， – kobe 2011-05-19 15:50:51

答

您可以使用文档宽度检查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，因为你是你的提示设置为200像素高度。

@Narazana你可以用类似于左边工作的方式来做。而是使用height（）函数。我会用一个例子来编辑答案。 – 2011-05-19 17:32:03

谢谢，Vicent。我终于做到了。我只是更新了问题，包括最新的更新演示http://jsfiddle.net/Qkwm8/3/ – Narazana 2011-05-19 18:03:16

@VincentRamdhanie亲爱的文森特拉姆丹妮你能检查我的问题吗？ [计算器]（http://stackoverflow.com/questions/26822445/css-hover-card-positioning） – innovation 2014-11-09 00:34:54

答

$（ 'a.show-工具提示'）。鼠标悬停（函数（）{

IF（（$（本）.parent（））。CSS（ '浮动'））== “右” ）添加适当的类向左

其他 - >合适的一个正确的 .... }

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

相关推荐