Tlite - Lightweight Tooltips

Tlite is a JavaScript tooltip library with 0 dependencies that aims to be as small as possible without skimping on key features. It currently weighs in at less than 650 bytes when minified and gzipped. Why? Because the web should be fast. That means minimizing the number of byes sent over the wire.

// Using es6 syntax, and classList. tlite should work
// in IE9+, but this sample won't!
tlite(el => el.classList.contains('tooltip'));

That code sample will show tooltips for any elements that have a class of 'tooltip'. For more details on how to use tlite, head over to GitHub .

Multi-directional

Hover over the buttons below to see how it looks when variously positioned:

Plays nice with modals

Tooltips disappear when something flies over their container. Click the modal button to see it in action.

Can be manually invoked

Click the button below to toggle the tooltip.

Is easily styled

The CSS is minimal and simple to override.

Caveats

When the tooltip is displayed, it is inserted as a child of the element it is associated with. What this means is that tooltips cannot be displayed on contentless tags such as img, input, textarea, etc. The workaround is to put the toolltip on a wrapper element. This was done so that if an element is dynamically removed from the DOM, its tooltip goes with it.

More Examples

Here's a form whose inputs show a tooltip when focused. And an image that shows a tooltip on hover.

That's all, folks!

Head over to GitHub or npm and get started! If you want to see the source for this page, it's all inline, so inspect away.