Question

我在JSP上显示了一个列表。在鼠标悬停在任何值上我需要显示对应该值的描述。需要将描述显示为不作为警报，也不能将值作为超链接。例如。假设值为ABC，因此鼠标悬停应显示AppleBoyCat。需要使用onmouseover。让我知道怎么做..

Answer 1

你想做什么？如果您只想显示工具提示，可以设置任何元素的title属性，它将显示为工具提示。

此外，abbr标记也可用作工具提示：

<abbr title="test">stuff</abbr>

Answer 2

你可以通过两种方式解决这个问题：

1 - 隐藏的dom对象（例如div），当你滚动任何

时会显示出来

或

2 - 你可以重写你所迷你的特定元素的html。

您可以在加载其他所有内容时加载此数据（无论是作为Javascript对象，还是作为标记，尽管这样更笨重），或者您可以在鼠标悬停时异步加载服务中的描述数据（尽管您有更滞后）。

jQuery是一种快速而肮脏的方法来实现这一点（比脏更快），但直接的JS或几乎任何其他JS库也可以。

Answer 3

也许不是最干净的解决方案，但是这样的事情：

<a class='hover' rel='tooltip'>Link</a>

//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>

$(function() {
    $('.hover').mouseover(function() {
        var tooltip = $(this).attr('rel');
        $('#' + tooltip).fadeIn();
    });
});

并且offcourse添加一个回调隐藏它。它只取得链接的rel值，并用作div的id来显示。

这是一个快速而肮脏的解决方案，如果您只是稍微使用它，可以做得更顺畅;）还有很多插件可以以更清洁的方式提供相同的功能。

*编辑：刚刚注意到你在另一篇文章中添加了一条评论，你不能使用jQuery ..不应该用你不打算使用的东西来标记帖子。

Answer 4

正如TJHeuvel已经说过的那样，您只需使用title属性。

最好的方法是使用JSP中的value和title属性构建列表，如果由于某种原因不可能，您可以构建每个值的客户端数组及其相应的描述然后使用JavaScript在mouseover上动态分配标题

向我们展示更多代码以获得更多/更好的帮助。

Answer 5

对于简单的工具提示，title属性最有效，正如TJHeuvel所指出的

如果您需要更高级的HTML和CSS格式的工具提示，我建议您使用外部库。一个在没有jQuery的情况下运行良好的一个是wz_tooltip download here，documentation here

如果正确添加，您可以通过调用函数Tip()和UnTip()添加工具提示，如下所示：

<a href="index.htm" onmouseover="Tip('tip text')" onmouseout="UnTip();">Homepage </a>

如何使用onmouseover？

5 个答案: