You are creating an instance of the tip, but not showing it. Further, you are creating a new instance EVERY TIME the user mouses over, which means that the 3rd time they mouse over, you create a second instance (and the first one is shown), and the 4th time they do it, you create a 3rd instance and 2 instances show their tip (check out the DOM).
So, first, you need to ensure that you don't keep creating instances this way. Second, you need to call the show method, passing it the event, when you first create it. Finally, you should probably not do this at all. From the docs: Be wary of the cost of delegation; for example, mouseover/mouseout delegation on an entire document can cause your page to run the selector constantly as the user moves his or her mouse around the page. Delegation is not always the best solution. Running the selector to match an element is moderately expensive. To run it at click time isn't so bad because there's generally not a lot going on other than that (unlike domready, where we typically put a bunch of DOM searches and invocations). But this is true because you don't click the document every time you move your mouse a pixel. Mouseover occurs every time your mouse enters an element. Imagine scrolling through a page on wikipedia that's full of links and paragraphs and more. If you were to scroll really fast, or move your mouse quickly, you'd be firing off these DOM searches enough to bring your browser to its knees. This is why Tips remains a non-delegated plugin. On Fri, Sep 30, 2011 at 8:43 AM, hairbo <[email protected]> wrote: > Hi all, > > So I know I'm late to the party, but I just discovered Event Delegation > yesterday. Why did everybody keep it from me for so long? (-; > > Anyway, I'm trying to make it work with Tips (which has, for some reason, > always caused me grief), and I can't quite figure out how to make it happen. > So within a class, I've got the function I've pasted below. I'm attempting > to attach Tips using mouseover:relay(), but (predictably), the Tip doesn't > display until the *second* time I mouseover the element, because it's > getting attached on the first mouseover. The other thing that seems wrong > with the code below is that it will (I think) attach Tips on *every* > mouseover, not just the first one. There aren't a lot of Tip children of " > this.options.info"--at most just five or so--but the children are updated > via AJAX, so it seems cooler if I could just use delegation to attach it > once and be done with it. > > I'm sort of getting the feeling that Tips maybe isn't really designed to > work with Event Delegation, since Tips has a lot of the attaching and > triggering built in, but maybe I just don't know how to use them together. > I'll keep digging, but any advice is appreciated. > > Thanks, > Ben > > tips: function() { > > var that = this; > $(this.options.info).addEvent('mouseover:relay(' + this.options.tipclass > + ')', function(event, el){ > var tips = new Tips(el, { > text: function(el){ > > var res = '', id = el.getProperty('data-id'); > var container = $('discounts-' + id); > if(container) { > res = container.get('html'); > } > return res; > }, > className: that.options.tipcontainerclass > }); > }); > }, >
