minimally invasive javascript tooltip utility (not a jQuery plug-in) needed

Question

I want to use tooltips in my web app running in desktop and mobile touch browsers. To that end, I've written some touch-event code to generate a custom "linger" (pseudo-hover) event for touch. In touch devices, I want to display the tooltip when the user touches an element and lets her finger linger on it for ~500ms, like the tooltip on the iPad's virtual keyboard. When there's a mouse, the hover would trigger the tooltip.

So I'm looking for a minimally invasive tooltip utility. It should not attach itself to events unless specifically instructed to do so. It should do nothing that would interfere with jQuery UI 1.8.2 or DOM event propagation. Nearly all of its intelligence should be devoted to determining where it should be displayed and drawing a connecting wedge between it and the target element, given the twin facts of the target element's location and the size of the htmlContent.

It must let the developer control the show/hide manually and set content manually via a simple API:

    tooltip.show( targetElement, htmlContent, options);
    .
    .
    .
    tooltip.hide( targetElement, options);

Grateful for recommendations. Thanks

Answer 1

Sencha Touch is what I'm going to be using for my mobile apps.

Sencha Touch is the world's first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization. We make specific use of HTML5 to deliver components like audio and video, as well as a localStorage proxy for saving data offline.