Dears,
1/ My current situation
I am building a website on WordPress for learning English which have tooltips for English/Vietnamese explanation of NGSL list. (New General Services List ~ 2,800 core English words).
My current method is to use a Wordpress Plugin at . However, for a page with few hundreds keywords like this the page loaded really slow (10-15s) because each tooltip is actual a post load from custom post on WP. Sometimes my shared host die due to that volume of request (thousands at same time).
My temporary method is to use Wordpress Super Cache to cache my posts (exclude these keywords’s post) and I decide to learn JavaScript to write my own plugin.
2/ My understanding so far
Based on my learning, I found 02 JS library:
-
Tippy.js at https://atomiks.github.io/tippyjs/ > This will helps to call Tooltips based on CLASS and TITLE (tooltip’s content)
-
Mark.js at https://markjs.io/configurator.html > This will helps to add CLASS to a specific WORD
So my approach is to:
Create a list of Word:definition like this
var highLightWords={“the”:“used to point to something already mentioned”,
“be”:“used to show the identity of a thing”
};
- Adding SPAN element for EACH WORD in a POST which included in highlLightWords and ADD CLASS toolTip to call toolTip later and ADD TITLE attribute to show definitions
$( document ).ready(function() {
for(var key in highLightWords){ //Ading SPAN and Class = WORD $(".context").mark([key], { "element": "span", "accuracy": "exactly", "className": key+" toolTip" //Add 1 more CLASS to CALL Tooltip and 1 Class Key to Loop Title below }); //End of Adding SPAN loop. START add Title for Tooltips $("."+key).attr({ "title" : highLightWords[key] });
//End of Addinng Title
};
});//End of Document READY
- Call Tooltip
$( document ).ready(function() { Tippy('.toolTip');
});
My approach worked, it can show all of 2,800 words’tooltips very well. My problem, however, is the loading time very low (around 40-60 secs…). For a actual post on Wordpress, the numbers of keywords is only around hundreds or lesser. The loading, however, is still very slow (10-15s).
Do you have any ideas or solutions to help me reduce loading time?
Thank you so much!
