maTooltip is an easy to use JavaScript based tooltiper. Built by reverse engineering Twitter Bootstrap's tooltiper to make a perfect mimic of their technology with some added benefits and a crazy nice API. It is open source and free to use by anyone (except terrorists). maTooltip uses jQuery, CSS and HTML under the hood. It doesn't rotate, has no native support for Ajax and it doesn't fart. maTooltip is slim, easy to use and efficient with its task.

Live Demos

Input different values in the boxes, hit Load button and all new values will be set in the demo tooltiper's to your right. You'll get a nice cheat sheet with valid input values displayed once you put your mouse marker in a box (enabled? ). There are more stuff to play around with than what meets the eye here, please consult the documentation. If you're keen to fully try out the behavior of .show and .toggle as demonstrated to your right, then you could try to load these values.

There are some regular hyperlinks at the end of this paragraph. If Visbility duration to your left is set to something different than -3, then JavaScript code behind this page will register handlers for you so that whenever you hover the links, the tooltiper's .show method is called (otherwise the constructor will handle registration of hover events). If such is the case, then the hyperlinks will never explicitly call the .hide method. Hover left or hover top, hover bottom or hover right.

And here you have some div's. Totally independent of whatever Visibility duration you supplied, JavaScript code behind this page will make a mouse click on a div always call the tooltiper's .toggle method.


Uber-advanced demo

The real advantage of maTooltip is how easy it is to use. With just one line of code maTooltip.quickTooltip('#myID', 'Amazing, fabolous, godlike!'); you can reach out to your vistors fast and elegantly. With the help of maTooltip's powerful API, stored variables and a few more lines of code (click!), only your creativity sets the limit for what you can accomplish.