custom attributes

custom attributes

Hi there,


This may have been answered before, but I couln't find a solution yet.

I need to know what the best practice is to be able to assign custom attributes to elements.


for instance; let's say we want to have a tooltip on certain elements...  What I would do is something like this:

<div class="tooltip" tooltip_title="Title goes here" tooltip_text="Content of tooltip"/>

Then I would have jQuery select all elements with a tooltip class, and instantiate these elements by adding a tooltip to them, using both title and text from the custom attributes I entered in HTML.

This works like a charm, BUT as well know, this HTML won't validate.

Second example:

<div class="pricetag" amount="10">10.00 EUR</div>

I want to be able to assign a tooltip to these elements that will pass the amount value (10) to an ajax to calculate the taxes for the logged in user and display it in the tooltip.  I have this working fantastically, but again - the amount attribute is no valid html if we want to validate strictly.

what is the best approach for this?

I could easily start rewriting my code to do something like

<div id="uniqueid" class="pricetag">10.00 EUR </div>

<script type="text/javascript">

jQuery("#uniqueid").attr("uniqueid", 10);

</script>


but this will increase filesize enourmously, especially since we are working OO, and I can't possible combine all javascript code at the bottom of the page, simply because in PHP, I would do something like

$pricetag = new Pricetag();

$pricetag->setValue(10);

$pricetag->display()

that last call will need to generate the entire widget code, so I will need print out the bit of javascript as well.


So my question - to make things short - is just what the best approach is to add custom attributes.  I've seen nitobi elements that have their own tags like <ntb:XXX> which validates, but I don't even know where to start to create such elements...

I hope someone is able to point me into the right direction!

Thanks for helping me out!