Hi all,

one of our clients has a very javascript heavy application for local
intranets. On many pages of this application, there are tooltips that
get loaded (usually up to 60 or 70), which make the application behave
very slowly at some time or another (at least in good ole IE6, which
we need to support). Currently we are using Prototip2 from nick
stackenburg, but it seems that this seems overkill and isnt so
performant at all.

So, I want to start to build my own tooltip-functionality, which
should be lightweight and does not need thousands of listeners, which
also seems to make pages very slow.

My question is: What is the best approach for this task? I am
currently experimenting with event-bubbeling to only use one listener
on this page, so I can create as many tooltips as i want without
raising memory too much.

This is what I have come up with in the last 20 minutes or so:

/**
 * Creat tooltips for an array of objects
 * @param {Object} classes Classname of elements where the tooltips
should be shown on
 * @param {Object} content_attribute The dom attribute of the element
we should get the content from
 */
var tt = Class.create({

        initialize: function(classes, content_attribute) {

                this.classes = classes;
                this.content_attribute = content_attribute;

                this.initListeners();
        },

        /**
         * Initialize the global listener
         */
        initListeners: function() {

                document.observe('mouseover', 
this.moverListener.bindAsEventListener
(this));
                document.observe('mouseout', 
this.moutListener.bindAsEventListener
(this));
        },

        moverListener: function(e) {

                elm = Event.findElement(e, '.' + this.classes);

                if(elm !== undefined) {

                        this.showToolTip(elm)
                } else return;
        },

        moutListener: function(e) {

                elm = Event.findElement(e, '.' + this.classes);
                if(elm !== undefined) {

                        this.hideTooltip(elm);
                }
        },

        showToolTip: function(elm) {

                console.log(elm + ' is shown')
        },

        hideTooltip: function(elm) {

                console.log(elm + ' is hidden')
        }
};

As I am quite experienced in prototype.js (well, at least I think I
am...), but not in such things like performance tuning javascript and
such stuff, I really would love to hear some feedback from you. Are
there any other performance problems that this type of listener would
force me in (dont know how fast findElement() is compared to a direct
binding to the source element of a listener). do you think that this
is maybe the wrong approach at all?

The tooltips should go without great graphical stuff, the only thing I
want to add are pointers in pure css, like those seen on
http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/,
to save some more bandswidth.

Thanks in advance,
Chris
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to