Blogs

In order to add a tooltip to any html element, you need to do the following:
– Include the javascript and stylesheet files. The tooltip plugin 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