I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/modal feature to provide explanations. You can view the prototype of my website here: . Remember to click on Chinese words highlighted in blue to see the modal.
While browsing on Stack Overflow, I came across a helpful thread about implementing tooltips for mobile browsers. You can check it out here: Tooltips for mobile browsers.
Here is my current approach:
- I have a JSON file serving as a dictionary.
- Another JSON file contains the text content to display.
- When the front end requests data, Node.js sends both files. The frontend JavaScript then displays each word by looking it up in the dictionary and creating an HTML span element. Users can click on a word to reveal its meaning in a popup.
However, since implementing this method, I have noticed a slowdown in page loading time. I suspect there may be an issue with my implementation, especially considering that I plan to add more text in the future.
I am seeking advice on alternative methods to achieve the same functionality.
The website that has inspired me in this endeavor is:
I hope my explanation is clear. Thank you for your help.