Fork me on GitHub


Opentip uses adapters to make the framework available for all major frameworks and provides a native adapter that works without framework.

jQuery, Prototype, Native

First download the appropriate opentip bundle from github for your framework.

Example: if you’re using jQuery, you need one of those files: opentip-jquery.js if you don’t intend to support IE<=8, or opentip-jquery-excanvas.js if you also want to support <=IE8.

You also need to download and include the Opentip CSS file.

If you bundle your scripts yourself, or want to be able to debug opentip, use the files from the lib folder and include opentips.js and adapter.jquery.js in that order.


Now embed the Javascript and the CSS file in your page.

<script src="path/to/adapter-jquery.js"></script><!-- Change to the adapter you actually use -->
<link href="path/to/opentip.css" rel="stylesheet" type="text/css" />

That’s it. Opentip now automatically scans the document to find any elements with a data-ot attribute. To programmatically create Opentips please refer to the documentation.

(For Internet Explorer 7 & 8 support please see the internet explorer section below)


To install Opentip as component just specify it as dependency in your component.json file:

json "dependencies": { "enyo/opentip": "*" }

To activate it you still have to include it once in your app:

js require("opentip");

(Don’t forget to include the build.css which includes the opentip.css).


To install Opentip with ender simply type one of these:

$ ender build opentip # to create a new build
$ ender add opentip   # if you already have an ender build

(Don’t forget to download and add the Opentip CSS).

internet explorer

If you want Opentip to correctly work in <= IE8, you have to include excanvas as well.

If you’re downloading a bundle then just make sure you choose a file with -excanvas at the end.

If you use the separate lib/ files, get my version of excanvas as well (which supports IE8).

If you’re using component, you can simply add enyo/excanvas as dependency, but don’t forget to require it before opentip: require("excanvas");.