jQuery Tooltip

In order to add a tooltip to any HTML element, you need to do the following:

• Include the JavaScript and stylesheet files. The tooltip plug in is implemented in the jqxtooltip.js file.

  <link rel="stylesheet" 
  href="styles/jqx.base.css" type="text/css" />
  <script type="text/javascript" 
  src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript" 
  src="jqxcore.js"></script>
  <script type="text/javascript" 
  src="jqxtooltip.js"></script>

• Add the HTML elements. You need to have two things: the elements that show a tooltip when the cursor is placed on top of them and one or many tooltip elements. In this setup, there is a single tooltip element with id=’jqxTooltip’ that works for all of the target elements (‘div1′ and ‘div2′):

  <div id='jqxTooltip'></div>
  <div id='div1' style='background: orange; 
  width: 10px; height: 10px;'></div>
  <div id='div2' style='background: blue; 
  margin-top: 20px; width: 10px; height: 10px;'></div>

• Tooltip activation starts by selecting the tooltip element and calling the jqxTooltip constructor.

  $("#jqxTooltip").jqxTooltip();

  Then, you need to call the tooltip’s ‘add’ function and supply two arguments to it – a jQuery selector to the tooltip target element and the tooltip title.

  $("#jqxTooltip").jqxTooltip('add', $('#div1'), 'Title1');
  $("#jqxTooltip").jqxTooltip('add', $('#div2'), 'Title2');

The default behaviour is that the tooltip is positioned on the bottom/right of the target element.

CodeProject