MooTools.Tips v1.2
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.
Comments
8 Responses to “MooTools.Tips v1.2”
Leave a Reply
Hello
I was wondering if you could help me port the original mootips (mootools 1.11 : http://www.uhleeka.com/archives/mootools/1.1/mootips/ ) to be used with mootools 1.2
I am familiar with code in general, but not with javascript or mootools;
so I wouldn’t have any idea where to start.
Do you have any ideas?
Thanks in advance.
There are just a couple changes you’d have to make, depending on the complexity of your 1.1 MooTips implementation.
Do you have a specific example or sourcecode in mind?
I am implementing them the same way as in the demosite of (1.1). But if I use mootools 1.2 I get several errors shown by firebug. I have tried this: http://www.mooforum.net/solutions12/converting-mootools-mootools-t259.html but I’m probably doing things wrong.
Does this post answer what you need:
http://www.uhleeka.com/blog/2008/11/mootoolstips-convert-v11-to-v12/
Check out the full source too:
http://www.uhleeka.com/archives/mootools/1.2.1/tips-convert-v11/
HTH
Wow, just wanted to say thanks for putting you free time into this. This definitely makes things a lot more clearer. It’s almost exactly what I want I’m only missing the old ajax functionality with: title=”AJAX:lipsum.htm” class=”toolTipImgAJAX”
But I’m going to try and figure that out myself. You’ve already done the hardest part :) thanks again.
Hi
Managed to get the old script working with mootools 1.2
I’m not a js coder so there will probably be a few wrinkles here and there but it does seem to work :)
http://paste2.org/p/105962
Great script. I’ve been looking around for MooTisp for MooTools 1.2
I found this other one: http://www.e-magine.ro/playground/tipsx3/
Is it possible to use/add this functionality to the current script you have?
Thanks. =)
@cssprodigy – sorry…it’s only been a month since your comment :p
i updated the demo to handle an “AJAX::Url.html” (note the double colons instead of single). http://www.uhleeka.com/archives/mootools/1.2.1/tips-convert-v11/
it works as a really simple tip, but the built-in functionality of the Tips object is very limited compared to the 1.1 library. For example, you cannot put a link in your tip because you cannot mouseover the tip (it hides on mouseout of your element). Another example, when you set the “fixed” option to true, the tip is fixed to the top left corner of the calling element.
So, if you are looking for anything more advanced than what I have posted, you will probably want to find some sort of external library to do what you need.
Thanks!