Fork me on GitHub

opentip is a javascript tooltip framework
yes - it’s free, open source and comes with different styles!


demo

styles

There are great styles built right into opentip and it's easy to create your own.

ajax

Opentips can automatically download their contents via AJAX. It's extremely easy to configure them to do so.

joints&targets

Joints and targets allow you to position the tooltip exactly where you want it.

stems

Stems are those little pointers. You can configure them to point in any direction.

canvas

Opentips are drawn on canvas which creates beautifully rendered tooltips in all browsers.

many more...

There are many more features! Dive into the documentation to get more information.

Show your work

showcase

If you built a website using Opentip, tell me about it! I'm building a showcase and would be happy to include your work.

browser support

Opentip has been developed for and tested in all major browser, including IE7+.

Browser support

usage

Creating a tooltip is really easy.
The easiest way to define a tooltip is with element tags:

<div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>

All tooltip options can be passed like this. Just prefix them with data-ot- and use dashes (eg.: data-ot-hide-trigger="closeButton").

To create a tooltip with Javascript you can instantiate the Opentip class like this:

new Opentip("#my-element", "Shown after 2 seconds", { delay: 2 });
// Or within your framework, eg.: ender, jQuery, prototype
$("#my-element").opentip("Shown after 2 seconds", { delay: 2 });

For a list of valid options and the complete documentation please visit the documentation page.