悬停在文本上时显示工具提示

Question

当用户将鼠标悬停在某些文字上时，如何显示工具提示？这些文字是关键字。 我不想为每个关键字手动添加这些工具提示。我正在寻找一种方法来创建某种类型的脚本，以便在客户端或服务器端自动执行此操作。当用户将鼠标悬停在这些关键字上时，如果关键字存在于数据库或数组中，则它应该从数据库中检索信息。

如果有任何关于如何解决此问题的好教程，请告诉我。

Answer 1

有许多有用的插件可以创建漂亮的工具提示。

我知道其中两个使用jQuery框架：

• mb-tooltip ：[http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/]
• jquery-plugin-tooltip ：[http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]

您必须使用span元素和类来围绕关键字以应用jQuery选择器。 也许最好查询关键字存在服务器端创建ad-hoc html代码以显示正确的工具提示，否则你必须以AJAX方式创建工具提示，处理关键字上的鼠标悬停事件。

Answer 2

您还可以使用YUI作为JQuery插件的替代方法。这里有一个你想要做的事情的例子Simple Tooltip Example with YUI

Answer 3

有一个非常受欢迎的Jquery插件“美容秘诀”：

http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

带选项的美容秘诀示例：

$('#example3').bt({
  contentSelector: "$(this).attr('href')",
  fill: 'red',
  cssStyles: {color: 'white', fontWeight: 'bold'},
  shrinkToFit: true,
  padding: 10,
  cornerRadius: 10,
  spikeLength: 15,
  spikeGirth: 5,
  positions: ['left', 'right', 'bottom']
});

Answer 4

使用jQuery工具提示插件，可以找到here。

代码如下：

$("img[title]").tooltip()

Answer 5

您可以考虑使用HTML Global title Attribute。如果您正在寻找已经内置于HTML中的简单内容（因此可以在没有插件的情况下在PHP中使用）那么这将是我的首选解决方案。我正在考虑在项目中使用它。