MooTools: change selector from ID to class

I have a MooTools tooltip thing working wonderfully. Although, I'm wanting my page to validate, and multiple instances of the same ID is sort of preventing that.

What I have is a pricelist - this pricelist have certain footnotes, and those footnotes are being displayed in a tooltip hover if... hovered. That's all just fine, but since there are multiple footnotes that says exactly the same, I get an instance of multiple versions of the tooltips (I've tried placing the tooltip-div outside the while-loop making the table displaying the prices, but that doesn't work, for some reason).

Anyone have an idea how I can fix this? Either change the ID-selector to a class-selector, or how to put the tooltip code only one place on the page?

It's possible to view a "in development" version here:
http://dev.bergenpchjelp.no
The text and such is all in Norwegian, but the functions and such should work in any language

Anyone?

If needed, I'd be happy to post the code bits here, but as I'm not completely sure as to what is needed, I'm just adding direct links to the .js-files:
http://dev.bergenpchjelp.no/js/MooTooltips.js <- the actual tooltip js-code
http://dev.bergenpchjelp.no/js/main_js.js <- the domReady functions (and more for the tooltips to work)

If I need to add any more, just tell me.

 

heh
you seem to have two tipper triggers:

<a href="#bup" title="Forutsetter tilgjengelig back-up media" rel="{text: 'Prisen forutsetter at maskinen har enten CD- eller DVD-brenner, eller at kunden har et eksternt lagringsmedia tilgjengelig for sikkerhetskopiering. Dersom ikke, så må pris avtales for den enkelte jobb.',position:-1}" class="tipper">***</a>

or

<a class="tipper" href="#timepris" title="" rel="{text:'Timeprisen er for tiden 400,-',position:-1}">Timepris</a>

and then:

new MooTooltips({
			hovered:'.tipper',		// the element that when hovered shows the tip
			extra:{},
			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: -335,	// distance from left
			duration: 300,		// fade effect transition duration
			fadeDistance: 20    // the distance the tooltip starts the morph
		});	

PHP:

hovered:'.tipper', // the element that when hovered shows the tip -> this seems class based to me?

if( this.options.hovered )
this.elements = $(this.options.container||document.body).getElements(this.options.hovered);

PHP:

seems pretty nicely done to me. it seems to have found all the .tipper elements, what is the issue here, perhps i am missing something... :d

 

Oh, yes. Sorry. I changed the code, so basically I fixed it Stupid, I forgot to edit / close my post.

But the original problem was that there is a rel="{content: } which triggers on the ID of the containing element - eg. I have something where it's like this: rel="{content: 'textplacement'}" and then I have a <div style="display: none" id="textplacement">Whatever</div> which then gets triggered.

But as I said, I fixed it by doing an if/elseif/else statement using the php backend, and now it works just as I want it, so it'll do. However, if you got any pointers to how I could point something using the "content" rel-attribute to a class, instead of an ID (is it even possible?) it would be nice to know.