javascript 悬停在文本上时显示工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3357333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display tooltip on hover over text
提问by m0g
How would I go about displaying a tooltip when the user hover overs some text? These text are keywords. I don't want to manually add these tooltip for each keywords. I am looking for a way to create a script of some sort to automatically do this either on the client side or server-side. When a user hovers over these keywords, and if the keyword exists in the database or an array it should retrieve the information from the database.
当用户将鼠标悬停在某些文本上时，我将如何显示工具提示？这些文本是关键字。我不想为每个关键字手动添加这些工具提示。我正在寻找一种方法来创建某种脚本，以便在客户端或服务器端自动执行此操作。当用户将鼠标悬停在这些关键字上时，如果该关键字存在于数据库或数组中，则应从数据库中检索信息。
Please let me know if there are any good tutorials available on how to solve this problem.
请让我知道是否有任何关于如何解决此问题的好的教程。
回答by Impiastro
There are many useful plugins to create nice tooltips.
有许多有用的插件可以创建漂亮的工具提示。
I know two of them that use the jQueryframework:
我知道其中两个使用jQuery框架：
- mb-tooltip: [http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/]
- jquery-plugin-tooltip: [http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]
- mb-工具提示：[ http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/]
- jquery-plugin-tooltip: [ http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]
You have to surround your keywords with a span element and a class to apply the jQuery selector. Maybe it's preferable to query for keyword presence server-side creating the ad-hoc html code for displaying the right tooltips, otherwise you have to create a tooltip in an AJAX way, handling the mouse hover event on the keyword.
您必须用 span 元素和类包围关键字才能应用 jQuery 选择器。也许最好查询关键字存在服务器端创建临时 html 代码以显示正确的工具提示，否则您必须以 AJAX 方式创建工具提示，处理关键字上的鼠标悬停事件。
回答by Javi
You can also use YUI as an alternative to JQuery plugins. Here there is an example of what you want to do Simple Tooltip Example with YUI
回答by Nallware
You might consider using the HTML Global title Attribute. If you're looking for something simple that's already built in to HTML (and thus usable in PHP without addins) then that would be my go-to solution. I'm considering it's use in a project myself.
您可以考虑使用HTML 全局标题属性。如果您正在寻找已内置于 HTML 中的简单内容（因此无需插件即可在 PHP 中使用），那么这将是我的首选解决方案。我正在考虑在自己的项目中使用它。
回答by nicholasklick
There is a very popular Jquery Plugin "Beauty Tips" for this:
有一个非常流行的 Jquery 插件“Beauty Tips”：
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Example of Beauty Tips with options:
带有选项的美容秘诀示例：
$('#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']
});
