The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over.^[1] Tooltips do not appear on mobile operating systems, because there is no cursor.

Example Tooltip:

1. BeautyTips(a jQuery tooltip plugin)

Download Link: https://code.google.com/p/beautytips/downloads/list

or https://github.com/dillon-sellars/BeautyTips

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

Example use:

First you need to include “jquery.bt.min.js” and “jquery.bt.css” in your document.

html:

<span title=”<b>Booking Info:</b><br>Name: Abdullah al Mamun<br>Age: 33<br>Location:Bangladesh”>Hover</span>

javascript:

jQuery(“.tooltip”).bt({
contentSelector: “jQuery(this).attr(\’title\’)”,
shrinkToFit: true,
padding: 10,
fill:\’#00FF4E\’,
cornerRadius: 10,
positions: [\’right\’, \’left\’, \’bottom\’]
});