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

问题描述：

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.

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

如果有任何可用的教程，请告诉我。如何解决这个问题。 p> div>

答

There are many useful plugins to create nice tooltips.

I know two of them that use the jQuery framework:

mb-tooltip: [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.

答

There is a very popular Jquery Plugin "Beauty Tips" for this:

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']
});

答

Use the jQuery tooltip plugin, which can be found here.

Code looks like:

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

答

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

答

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.

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

相关推荐