如何定位元素，使其不会从可见屏幕流出 [英] How to position an element so that it does not flow off the visible screen

问题描述

我正在一个页面上创建伪工具提示，该页面上有很多a和span元素，这些元素与这些元素相关联。元素创建中的所有内容都很好，并且显示正常。

I am creating pseudo-tooltips on a page that has a lot of "a" and "span" elements that have these tips associated with them. Everything in the creation of the element is fine, and it displays fine.

但是，因为这是一个包含大量数据的页面，所以工具提示开始流过窗口底部边缘的可视区域。我最初尝试使用 window.innerWidth / innerHeight 来弥补这一点并不是很好。我正在使用jQuery进行DOM操作（但不是jQuery UI）。鉴于事件本身，以及工具提示的高度和宽度（我可以用 getBoundingClientRect（）获得），我如何定位此元素以便工具提示的底部永远不会低于窗口的边缘？

However, since this is a page with a lot of data, as you get towards the bottom of the visual area the tooltips start to flow past the bottom edge of the window. My initial attempt to compensate for this with window.innerWidth/innerHeight didn't come out too well. I'm using jQuery for DOM manipulation (but not jQuery UI). Given the event itself, and the height and width of the tooltip (which I can get with getBoundingClientRect()), how can I position this element so that the bottom of the tooltip is never below the edge of the window?

推荐答案

查看 jQuery UI位置插件。它不需要jQuery UI核心，并且将成为jQuery核心插件。

Check out the jQuery UI position plugin. It doesn't require the jQuery UI core and is slated to become a jQuery core plugin.

更多文档： http://jqueryui.pbworks.com/Position

这篇关于如何定位元素，使其不会从可见屏幕流出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！