MooTools: change selector from ID to class

[PoPSiCLe]

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.

[dimitar christoff]

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
});


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);


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

[PoPSiCLe]

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.