Back in the days of MooTools v1.1, MooTips was an external class designed to use an element’s “title” attribute to control the content of the tip. See a demo of the 1.1 version.
MooTools v1.2 includes a “Tips” class which operates very differently from the v1.1 extension. Browse the online documentation.
Breaking it down…
Download the MooTools core library and use the more builder to download the additional “Tips” functionality. Include the files in the head of your page:
<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script> <script type="text/javascript" src="mootools-1.2-more.js"></script>
Add the tooltip css:
<style type="text/css">
/* MooTools.Tips */
.tip-top {
color: #fff;
width: 139px;
z-index: 13000;
}
.tip-title {
width: 123px;
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}
.tip-text {
width: 123px;
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
color:#fff;
}
.tip-text A {
color:#069;
}
.tip-loading {
background: url(ajax_load.gif) center center no-repeat;
width: 30px;
height: 30px;
margin: 0 auto;
}
</style>Add an element to tooltip:
<body> <img src="moo.png" id="simple_tip" /> </body>
Using javascript, set the Title and Text to be displayed in the tip:
$('simple_tip').store('tip:title', "This is the Title");
$('simple_tip').store('tip:text', "This is the Text");And finally, create the tip:
var SimpleTip = new Tips($('simple_tip'), {
showDelay: 0,
hideDelay: 0,
offsets: {x: 10, y: 10},
fixed: false
});Check the full source code and a working v1.2 simple Tips demo.