I have a template system for creating PHP pages. In my template's jquery document ready function I have the following code to set up a 'global' tooltip for all elements that would usually show a browser default tooltip ...
$( document ).tooltip({ classes: { "ui-tooltip": "ui-corner-all my-ui-widget-shadow" }});
But it behaves oddly. For instance, sometimes it appears when I haven't hovered over something. In the example screenshot below, when I click the button on the modal dialog I have it generate another dialog. The tooltip for that dialog's close button appears when I haven't hovered over the close button, and stays until I click...
And the tooltip will persist in some areas when I've moved the mouse cursor away. In the example below I hovered over this row, the tooltip appears (correctly) then I click a button over on the right end of the row, which shows a modal form. When I close that modal form the tooltip remains visible until I click somewhere.
Is there a better, 'best-practices' way to replace the browser's default tooltip with the JqueryUI tooltip without resulting in this behaviour?
