Question

这有点难以解释，但我有一个HTML表，充满了SQL定义，交叉谈话很多。例如，一个人在谈论“INSERT语句”，并提到“唯一键”。另一行讨论了唯一的密钥。

我想创建一个小definition bubble（当你将鼠标悬停在INSERT行中的“唯一键”时），并使用相应行中的定义。我打算使用jQuery，但我愿意接受其他选择。有什么想法吗？

更新：我的代码为here

Answer 1

有一些jQuery工具提示插件（这正是你所追求的）。就个人而言，我一直在使用jQuery Tooltip并对此感到满意。我用它在工具提示中加入了一些非常复杂的内容。

我不完全理解你的其余问题。你想要自动发生这种情况吗？该表是否出现在页面上？服务器端代码是否创建定义气泡？

现在jQuery Tooltip有一个bodyHandler属性，你可以提供一个回调（函数）来定义工具提示的内容，这样就可以了。您是否希望自动创建这些链接/提示？

编辑：同时查看此highlight plug-in。即使您不使用它，您也可以复制用于在文档中查找文本并在其周围包装元素的方法。类似的东西：

$(function() {
  $("table.definitions th").each(function() {
    var term = $(this).text();
    var definition = $(this).nextSibling().text(); // assuming it's in a <td> in the same row
    // find all occurrences of 'term' in relevant text block
    // and wrap in <span class="term" title="definition">...</span>
  });
});

然后选择性地使用jQuery Tooltip从该标题中创建一个更现代的工具提示。

Answer 2

jQuery应该可以很好地完成这项任务。将定义气泡的值存储在视线之外的某个位置，并在悬停时使用jQuery弹出它。

Answer 3

而不是直接解析HTML，也许您可以为每个<tr/>提供一个可用于查找定义的ID。相反，如果您希望更多地控制哪个文本触发了气泡，请将单词包装在带有ID的<span />中。

JT

Answer 4

我建议使用＆lt;而不是像@jason所建议的那样包裹在span中。首字母缩略词＆gt;或者＆lt; abbr＆gt;用于标记所选单词的标签。

在任何情况下，你都可以像这样做某事。

我会把工具提示设置给你。

Javascript

$(document).ready(function() {
    $('acronym').hover(function(){
        var text = $('#definition_'+$(this).attr('title')).text();
        console.log(text);  
        $('#cbfsettinguptooltip').text(text)
        });


});

HTML

<table border="1" cellspacing="0" cellpadding="5">

    <tr>
        <td >Insert</td>
        <td id="definition_insert">The insert statement is better than the <acronym title="select">select</acronym> statement</td>
    </tr>
    <tr>        
        <td >Select</td>
        <td id="definition_select">No No Select is best, much better than <acronym title="insert">insert</acronym></td>
    </tr>
</table>

<div id="cbfsettinguptooltip">

</div>

如何在表中搜索jQuery中单词的定义？

4 个答案: