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.
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+.
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.