display tooltip on hover over text

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

Answer 2

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

Code looks like:

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

Answer 3

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

Answer 4

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.