I use Tooltipster library to provide tooltips for a huge number of words (about 8000) inside a single page. I do it by assigning Tooltipster to a class: $('.w').tooltipster({ ...
Therefore whenever a big enough page loads there's a lot of processing involved since every element of a class "w" has to be analyzed by the client to handle that tooltip. I wonder if there's a way to modify the code somehow to only do this for a specific element of a class "w" that is being clicked instead of looping through all of them at the beginning.
This is a very simple example from their page on which the slowdown is observed:
$(document).ready(function() {
$('.w').tooltipster({
trigger: 'click',
functionBefore: function(instance, helper) {
instance.content('My new content');
}
});
});
Is it really necessary to invoke a loop there (via a Tooltipster or something else) to make every element of class "w" ready for a certain function/task?
You can use delegation to create tooltips only when it's useful. It has its drawbacks in a few cases but it works well most of the time. You will find explanations on delegating for Tooltipster in the documentation: http://iamceege.github.io/tooltipster/#delegation