In the upcoming release of jQWidgets(planned for 15 October), the jqxTooltip widget will be significantly improved. It will look even better and it will be easier to work with it.
For example, if you have an ‘img’ tag with id=’film’ and want to display a tooltip when the image is hovered, you need to select the ‘img’ by ID or by its class name and invoke the jqxTooltip constructor. The initialization includes setting the tooltip’s content(it could be simple text or html), the tooltip’s theme and display position.
$("#film").jqxTooltip({ content: '<b>Title:</b> <i>The Amazing Spider-man</i><br /><b>Year:</b> 2012', position: 'mouse', theme: theme });
The new version of jqxTooltip will support the following display positions:
- ‘top’ – the tooltip shows above the host element.
- ‘bottom’ – the tooltip shows below the host element.
- ‘left’ – the tooltip shows at the left of the host element.
- ‘right’ – the tooltip shows at the right of the host element.
- ‘top-left’ – the tooltip shows at the top-left side of the host element.
- ‘bottom-left’ – the tooltip shows at the bottom-left side of the host element.
- ‘top-right’ – the tooltip shows at the top-right side of the host element.
- ‘bottom-right’ – the tooltip shows at the bottom-right side of the host element.
- ‘absolute’ – the tooltip shows at an absolute position on screen, defined by the
coordinate properties
absolutePositionX and absolutePositionY.
- ‘mouse’ – the tooltip shows after a short period of time at the position of the
mouse cursor.
- ‘mouseenter’ – the tooltip shows where the mouse cursor has entered the host element.
- ‘default’ – the tooltip shows at the bottom-right side of the host element but does
not make use of the
left and top properties.
Here’s an image of the new tooltip:
