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> PHP: 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> PHP: 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 }); }); PHP: 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) ); Code (markup): 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(); }, Code (markup): 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?
right - this seems rather useless 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 } }, PHP: 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. PHP:
And again, you make my day 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
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.
Yes, that's the book 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?
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.