MooTools tooltips - one instance works, another doesn't

[PoPSiCLe]

Hey again.

Playing around with MooTools tooltip functions, and I've gotten one instance of them to work:
http://dev.bergenpchjelp.no/index.php?page=prisliste
They are working just fine. That one is using one implementation of the tooltip feature.

I've been trying to get the following to work on my site:
http://dev.bergenpchjelp.no/mootest.html (stolen that one, just to see if it would work if I just copied the values) <- it works fine on the test page

But if I try to use a couple of the functions on my own site, for instance there is a test here:
http://dev.bergenpchjelp.no/index.php?page=admin
it shows nothing.

For the testing, I'm using the following:

<p>Here we have a simple <span style="color:#FF6600" class="tipper" rel="{content:'tipContainer2',position:-1,target:'targeted'}">text element</span> to display the tooltip. It displays the tooltip on a remote element.</p>

for the link, and:


<div class="tipContainer" id="tipContainer2">Hey, I'm remote. Neat!</div>
<div style="margin-top:160px; clear:both;" id="targeted">I'm the remote display element. Here's where the tooltip will appear if you hover the orange text.</div>

for the display part. Just copied directly from the mootest.html above.
Then, I added the following script to my main.js file:

window.addEvent('load', function(){
new MooTooltips({
hovered:'.tipper', // the element that when hovered shows the tip
extra:{
0: {
'id':'extra',
'text':'this text is added manually using the extra.text parameter.',
'position':-1,
'sticky':false
},
1: {
'id':'other_extra',
'ajax':'ajax.php',
'ajax_message': 'Loading... please wait.',
'position':1,
'sticky':false
}
},
ToolTipClass:'ToolTips', // tooltip display class
toolTipPosition:1, // -1 top; 1: bottom - set this as a default position value if none is set on the element
showDelay: 100,
sticky:false, // remove tooltip if closed
fromTop: 0, // distance from mouse or object
fromLeft: -55, // distance from left
duration: 300, // fade effect transition duration
fadeDistance: 20 // the distance the tooltip starts the morph
});
});


All this, and nothing.
I've tried using firebug, and it reports an error:
$(el.id) is null
http://dev.bergenpchjelp.no/js/MooTooltips.js
Line 37

$(el.id) is null
(?)()()MooTooltips.js (line 37)
getClean()(function(), Object options=Object elements=[1])mootools.js (line 13)
initialize()(Object hovered=.tipper extra=Object ToolTipClass=ToolTips)MooTooltips.js (line 39)
initialize()()mootools.js (line 91)
(?)()()main_js.js (line 180)
run()()mootools.js (line 56)
E()(undefined)mootools.js (line 57)
cloneEvents()(function())mootools.js (line 181)
cloneEvents()("domready", undefined, undefined)mootools.js (line 182)
B()()mootools.js (line 256)
removeEvent()()mootools.js (line 175)
[Break on this error] $(el.id).set( 'rel', JSON.encode(el) );

The corresponding lines from MooToolstips.js is as follows:

var e = new Hash(this.options.extra);
e.each(function(el){
$(el.id).set( 'rel', JSON.encode(el) );
this.elements.include($(el.id));
},this);

this.currentElement = null;
this.attach();
},


I'm a bit stumped - I know the files work - I've gotten other functions to work, so the links to the different mootools-files and such are in place. I'm using Mootools 1.2.1, and the mootools-more-file, both the same as the ones in the original example. I've uploaded the imagefiles used in the example too, and I'm also using the original CSS-files in the header, so it should have any values corresponding. But no, it does not work.

Anyone have any idea as to why?

[dimitar christoff]

right - this seems rather useless :D

first off. make sure that the hash from this.options.extra actually has anything. in your instigation of the class, you set the extras array to:
extra:{
0: {
'id':'extra',
'text':'this text is added manually using the extra.text parameter.',
'position':-1,
'sticky':false
},
1: {
'id':'other_extra',
'ajax':'ajax.php',
'ajax_message': 'Loading... please wait.',
'position':1,
'sticky':false
}
},

now, if i am reading this correctly and i think i am (:D) it converts extras to a hash and then iterates through it, applying to all referenced elements the REL attribute blindly.

your error means that at least one of the two mentioned elements extra & other_extra are missing from the dom, so it fails when it tries to attach itself to them.

possible fixes:
- add the elements
- edit the extra hash on instantiation and remove references to redundant elements
- edit their mootooltips.js and add before the offending line after this:

e.each(function(el){
if (!$(el.id)) return false; // exit loop if element not found.

[PoPSiCLe]

And again, you make my day :D Thanks again. I think I'm starting to understand a bit more about MooTools now - ordered a book, hopefully that'll make me understand even more :)

[dimitar christoff]

if it's mooTools Essentials by Aaron Newton, its a great book and he's a top bloke - signup on the mootols mailing list on google groups, awesome bunch and great help resource.

[PoPSiCLe]

Yes, that's the book :D

I was wondering one more thing - I was trying to add another class-name to an event - is that possible?
The code is as follows:
$$("a.tipper").each(function(el) {

I tried adding a || "a.tipper_left" but that didn't work - didn't get any errors either, it just didn't... work.

Is it possible? Or do I have to add another addEvent?

[dimitar christoff]

erm, basically - you can use ANY number of pseudo selectors and you can also combine arrays.

for instance, you can do

$$("a.tipper,a.tipper_left").each...
$$("a[class=^tipper]).each... // Array of A's with classname starting with 'tipper'

or...

var tippers = $$("a.tipper");
tippers.combine($$("a.tipper_left")); // merge with the other selector...

tippers.each(....

i hope this makes sense.

[PoPSiCLe]

It made perfect sense, but I figured it out :)