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

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 wi开发者_运维百科th 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

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.

I am looking for something similar and am watching jQuery UI 1.9 which will have tooltips. Check out their working demo.

You would then simply map the hover event to click event somewhat like in this article .

having trouble setting up a proper jsfiddle with all the different dependencies