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

Question

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.

Answer 1

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.