Word list Tooltip not working in html

Scripture App Builder
1

When a user places the mouse over a word in a word list \w …\w* displayed in a browser on a website for the first time of a word a pop-up box with the definition appears - great.

But on all subsequent occasions of that word on a page the pop-up box does not appear.

How can I get it to appear on all occasions?

2

In Chrome every hover over the word brings up the tooltip. Same in Opera and Edge.

What browser are you using?

3

Hello,

Please go to the following link - but keep confidential as this is still under development

http://mauricem.net/sfb/ws4/04-MAT-001.html

Hovering over Juif in verse 11 and ange in verse 20 brings up the tooltip as expected

However hovering over Juif in verse 17 and ange in verse 24 do not bring up the tooltip i.e. not the first occurrence of these words

I have tried Edge, Firefox, Chrome and Opera on Windows 11, Edge on Windows 10 and Safari on a Mac Book Pro

The problem is exactly the same with all these browser o/s combinations

Your help is appreciated

Maurice

4

More information on this bug.
If the same footnote appears appears more than once it is given the same ID. Thus the tooltip only appears on the first occurrence of the footnote. However if I amend the html to give each footnote a unique ID the the tool tip works ok.

For example if I change
var glossary = {
“G-51”: “

<span class="k">Juif(s) : Quelqu’un qui est né d’Abraham, d’Isaac, de Jacob et de leurs enfants.
”,
“G-29”: “
<span class="k">Esprit(s) : Partie vivante d’une personne, mais que nous ne pouvons pas voir.
”,
“G-5”: “
<span class="k">Ange(s) : Un serviteur de Dieu qui apporte ses messages aux gens.
”,
“G-74”: “
<span class="k">Prophète(s) : Une personne qui reçoit et dit les paroles de Dieu. Dans l’ancien Testament, les prophètes parlaient souvent de ce qui se passera dans le futur (Nouveau testament).
”
};
to
var glossary = {
“G-51”: “
<span class="k">Juif(s) : Quelqu’un qui est né d’Abraham, d’Isaac, de Jacob et de leurs enfants.
”,
“G-51a”: “
<span class="k">Juif(s) : Quelqu’un qui est né d’Abraham, d’Isaac, de Jacob et de leurs enfants.
”,
“G-29”: “
<span class="k">Esprit(s) : Partie vivante d’une personne, mais que nous ne pouvons pas voir.
”,
“G-5”: “
<span class="k">Ange(s) : Un serviteur de Dieu qui apporte ses messages aux gens.
”,
“G-74”: “
<span class="k">Prophète(s) : Une personne qui reçoit et dit les paroles de Dieu. Dans l’ancien Testament, les prophètes parlaient souvent de ce qui se passera dans le futur (Nouveau testament).
”
};
i.e. duplicate the id 51but with a suffix, and in the html replace the second occurrence of

with

it works.

There is clearly a bug in the html auto generation - but it is beyond my skill set to determine where the bug is and how to fix

Please can this bug be fixed or a workaround provided?

Thank you
5

Thanks for the extra work on defining the issue. I’ll write up this in a bug report.

6

Just had some feedback from a very distant contact who is web savvy. He wrote:-

" the html is technically invalid as the spec only allows for unique ids on dom nodes, so having multiple spans with the same ID is creating an invalid document - not surprised jQuery is only touching the first instance it finds.

As the keys in the glossary are in the format “G-xx” I suspect they are all strings that would be valid as html classes - so I’d be tempted to do a quick regex to move the guilty span id’s into their class list and then change the jQuery selector in initFootnote() to target classes rather than ids.
So, to be clear, I’d do a regex to convert this…
Juif
…to this…
Juif

And the jQuery selector line in initFootnotes() changes to…
…
$(‘span.’ + id).tooltipster({ // Select dom nodes with matching classes
content: $(value),…
"

Hope that helps.

Thanks

Maurice

7

Thankyou for this contribution. I have tested it and confirmed it worked.

The Javascript would also affect Footnotes, so just take care you handle that as well.

I have added the information to the Bug issue already.