Brief article description is showing inappropriately in popovers from Wikivoyage (at least) ZIMs scraped from new mobile HTML endpoint

[Jaifroid]

See screenshot to understand the issue. I believe these new brief descriptions are specific to Wikivoyage, and are only showing in ZIMs scraped from the new mobile HTML endpoint. There is nothing wrong with them, but they are not well displayed and are probably redundant in popovers. It should be easy to filter them out in popovers.js given that they have an id. Test ZIM for this is the 08-2024 Wikivoyage English maxi ZIM https://download.kiwix.org/zim/wikivoyage/wikivoyage_en_all_maxi_2024-08.zim.

[THEBOSS0369]

Hey @Jaifroid ! This seems good to me i can fix it , can you tell me that how do i recreate this issue in my local website like see this image what my website is currently showing , so do i have to download that ZIM you provided in this issue and then import it in my website right? I know this question is quite basic but because of this question i can confirm two things first i'm doing correctly to recreate this issue and second is i can confirm that whether this issue is still relevant or not.

i have to import from brows zim library right?

[Jaifroid]

@THEBOSS0369 Thank you for your interest in contributing. Yes, please just download the linked ZIM and then drag-and-drop into the app (or open using the file selector). Then try it out by hovering over a link in the article (probably not a link in the landing page -- try going to "Europe" and hover over a link there.

Also, to set up your dev environment, please see CONTRIBUTING.md in this Repo. When you've done that and had a look at the problem, then come back here with your suggested solution before you start coding. You can look at how text is currently selected for inclusion in a popover by having a look at the code in popovers.js.

[THEBOSS0369]

Hey @Jaifroid ! Thanks for the step by step guide, but when i am hovering over links the popover is not showing instead the link's placeholder is showing. Can you take a look at the video . i also tried hovering in the High speed rail section but still popover didn't showed up. I have already marked the Show a popover preview of Wikipedia / Wkivoyage articles in the configure file . If there is anyother config i have to edit or any solution to show the popover it will be very helpful.

This is the video link
Link -> https://github.com/user-attachments/assets/0a3d47ba-8f25-4050-901d-89d46402f1ec

[Jaifroid]

@THEBOSS0369 Apologies for the slow reply -- I'm away travelling currently. You were absolutely right, there was an unrelated issue blocking the display of popovers when ZIMs were being read in ServiceWorker mode without searching for a page. Hopefully that is now fixed on main, so please pull the latest commits, and you should now be able to test this issue. Note there is another probelm with that ZIM: popovers now display, but as soon as you mouse over the popover, it disappears. I believe this is to do with the changed CSS setting a different z-index, but I'm not 100% sure. ZIMs scraped from the new endpoint are currently unofficial.

[THEBOSS0369]

Hey @Jaifroid No problem sir, you can take as much time as you want. i also noticed the issue of disappearing. I have a hackathon the day after tomorrow at microsoft so i won't be able to come with a solution now but i will do it on sunday. Thanks for understanding

[Jaifroid]

Hey @Jaifroid No problem sir, you can take as much time as you want. i also noticed the issue of disappearing. I have a hackathon the day after tomorrow at microsoft so i won't be able to come with a solution now but i will do it on sunday. Thanks for understanding

No problem. No rush at all, as I will be out of contact for much of next week.

[THEBOSS0369]

Hey @Jaifroid! i am finally done with the hackathon stuff so now i will be concentrating here! Okay so for this issue i came up with 2 approach
first is remove the brief descriptions from the popovers. Since these descriptions are redundant and not well displayed, eliminating them will make the popovers cleaner and more concise.
Second is Display Only the Relevant Content so that only relevant description will be shown and popup will look clean.
I would like to know which approach should i follow? and if there is a better way then these approaches, please let me know. Thanks