当用户将鼠标悬停在具有特定类别的div上而不在其他类别上显示时,如何获取提示信息

时间:2019-02-01 15:35:35

标签: html css tooltip

我实际上已经获得了工具提示,该提示显示了我希望显示的位置,该部分正在工作。它所显示的文本包含在<span>中,该文本一直隐藏,直到它们悬停在上面具有工具提示类的div上为止,类似于w3schools.com上的the example

我有一列div的列,只有某些列会获得工具提示类。我遇到的问题是跨度已成功隐藏在div中,因为没有具有工具提示类,但是它仍在为其保留空间,我无法弄清楚如何做到这一点。

我用<span>的{​​{1}}隐藏了CSS,这隐藏了文本,但仍然保留了空格。如果我将其更改为visibilty:hidden而不是display:none,它将隐藏文本并且不为其保留空格,这是有道理的,这几乎就是我想要的,除非我不能再次使它可见回发。

因此,现在我要讨论将整个内容放在ajax调用中,这样我就不必刷新整个页面,但是我不确定这也行不通。

这是否有可能,或者有人有任何建议吗?

我感谢任何人都能提供的帮助。

谢谢

2 个答案:

答案 0 :(得分:0)

您可以尝试跨度{position:absolute}

使用js代替CSS。

如果您使用css,那么它也会在响应时产生问题。

您可以使用引导工具提示或简单的jQuery https://jqueryui.com/tooltip/

答案 1 :(得分:0)

您可以做的是,给div一个id,然后通过css悬停,将工具提示的显示设置为“阻止”,

或者为此您可以使用javascript,通过on-over来重新注册那些div,功能,检查所悬浮元素的目标,如果与之匹配,则将工具提示的div显示属性设置为block