I'm showing tooltips like this
$(clickedElement).append('<span id="activeHelpTip" class="helpTip">Loading help...</span>');
$('#activeHelpTip').remove();
A colleague suggested that on page load I append ALL possible tooltips with visibility none, and show/hide them on demand.
What's the difference? Who cares?
Edit: Is it relevant that tooltips are provided by an ajax service?
I'd say it's somewhat easier and more maintainable to do it the way your colleague is talking about, because that usually results in the tooltips being next to the elements they refer to, in the HTML, instead of off in a script somewhere, and you're writing them directly in HTML instead of inside JS strings.
I don't anticipate that either is going to be perceptibly faster than the other, or use a meaningfully different amount of memory.
Re your edit: If your tooltips are currently being pulled via Ajax, then naturally they'll come up much faster if they were preloaded in the page instead.
That is just a much cleaner and easier way to do it. Also, you could use different methods to show/hide the tips like fadeIn()/fadeOut(), slideDown()/slideUp on the hidden element.
Since you're already using jQuery, you should check out the Tooltip plugin. It makes showing tooltips pretty straightforward and is very flexible.
Maintainability aside - what you are doing will perform well, following best practices for tight scoping of selectors. So there is no performance reason to change.
From a maintainability perspective its definitely could be improved to make the list of tips more editable - getting the text away from the mark up.
The biggest reason I could think to use show and hide instead of append and remove is that when you use .remove() it will destroy all event handlers and cached $.data on the DOM Objects you are removing.
From jQuery docs
Removes all matched elements from the DOM. This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data. So:
use hide/show to show parts of form with validation. have a problem. hiden part of form still need to be validated. suxx. hope append/remove will help me.