使用CSS定位工具提示

问题描述:

我的问题涉及工具提示定位。使用CSS定位工具提示

我改编的脚本使用绝对定位将工具提示放在链接的几个em中。这对于大屏幕非常有用。

但是,当屏幕缩小时,有时文本会出现在浏览器边缘附近,并且工具提示只是悬停在边缘上方。

为了解决这个问题,我想出了我自己的黑客解决方案:只需在屏幕宽度较小的情况下使用相对定位规则,使用@media屏幕和(max-width:480px) 。这有效,但它远非优雅。

理想情况下,工具提示会在屏幕边缘被屏幕边缘“推动”,但我不知道如何实现这一点。

希望这是有道理的。

无论如何,here's a link to the page that I've used this all on(工具提示文本有虚线下划线)和here's the CSS behind it

+0

你用JavaScript/jQuery来做这件事吗? – 2012-07-26 09:47:57

+0

我想我会是,但是那会引入更多我不熟悉的代码。 Rob建议的百分比宽度似乎在与“float:left”一起使用时效果很好。我以前曾经用过它的绝对定位,并有溢出问题。 通过相对定位,它似乎没问题。 – joshuahutt 2012-07-26 17:40:15

不是使用em,而是使用百分比,但是您必须记住,百分比始终是工具提示大小的父级百分比。

+0

感谢您的建议。我尝试过,但是,由于你陈述的原因,这不是一个功能性解决方案。父母是一个简短的链接,所以这使他们太狭窄了。 – joshuahutt 2012-07-26 16:58:01

+0

其实,我只是尝试了100%的负边距,而且它看起来很完美。我会做一些进一步的测试,但这绝对是对小屏幕尺寸的改进。谢谢! – joshuahutt 2012-07-26 17:10:19