Conflict with use of rel attribute in mootools

Question

Looking for some insight into this problem.

I have dynamically generated links on a page that launch a lightbox ie they use a rel="lightbox[...]" I'm also putting a class on the hyperlink to make a tooltip work.

<a id="a_-1_6" class="Tips2" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">

And in the dom ready event

                var Tips2 = new Tips($$('.Tips2'), {
                initialize: function() { this.tip.fade('hide'); },
                onShow: function(tip) { tip.fade('in');  },
                onHide: function(tip) { tip.fade('out'); }
            });

This all works fine except the tip uses the rel attribute to store data, i'm presuming as its a pre-html5 - so my question is would this mean I need to make my own version of the Tips class in mootools to work off the data.* attributes? I'd like to see I'm not barking up the wrong tree before I try that.

Answer 1

Tips' documentation states that you can change which property is checked for the tip text. By default, it is rel or href, but you can change it when initializing the new Tip:

var Tips2 = new Tips($$('.Tips2'), {
    initialize: function() { this.tip.fade('hide'); },
    onShow: function(tip) { tip.fade('in');  },
    onHide: function(tip) { tip.fade('out'); },
    text: 'data-text'        // Will now check the data-text property for tooltip text
});

Answer 2

Could you make another element inside the Ahref, like:

<a id="a_-1_6" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">
    <span class="Tips2">blah</span>
</a>

This way, you can avoid the conflict.