Tooltips not displaying on iPad in Chrome and Safari

[jscheuer1]

Well you could try the easier test first, and if it proves to be the fix, it will not require so much trial and error. That would be to (on a copy of your page, save what you have) revert to exactly the hover tooltip code on the w3 schools site that works. Don't use any of the modifications that you've added. If that fixes it, it's not a conflict with your basic styles, rather just a modification to the tooltip code. Then you can add those few things back one at a time until it breaks. Then, if it's something you need, but don't know how to use it there without messing up those browsers, ask us, we might have an idea or two.

Even if you it appears to be a conflict with your site's style, that's easier to test than you might think. You can remove whole blocks of style at a time to find the section you need to concentrate on. But try the simpler part first, it may provide the answer quickly.

Oh and I agree that you might as well leave the tooltips in regardless, because most people will still see them.

[ellenjones6]

Ah, great minds think alike! Yes, it finally occurred to me to try this approach. I created a test page which used the W3 Schools code only, the page consisted only of the W3 Schools code and no other styles. Guess what? The tooltips worked exactly as they worked on my page. That is, they worked on all my desktop browsers, and two of the iPad browsers (Firefox and Opera), but did not work at all on Chrome and Safari on my iPad. So, I conclude that the problem is NOT in any code changes I may have made to adjust the tooltip styling or any other styles in my style sheet that could have been fighting with the tooltip code. The problem is with the code in the demo code I started with.

It is not clear to me why the W3 Schools demo (which was, of course embedded within their larger page) worked on Chrome and Safari on the iPad, while the test page with the bare code did not. I can only hypothesize that the rest of the W3 Schools page (ie, their CSS) had something that made it work. I have no clue what that "something" might be or how I could add it to my page to achieve success with Chrome and Safari on the iPad.

But at least I am spared the ordeal of trial and error, trying to determine whether something on my site is interfering with the tooltip code.

So, it's a victory in a way. Of course, the tooltips still don't work on the iPad in Chrome or Safarai, but I guess most people can use them if they need to find out, for instance, what "leaf venation" is.

[jscheuer1]

Hmm, using the console I MIGHT be able to see anything extra the w3 schools page has. I'll have a look later.

[jscheuer1]

OK, there's some kind of event listener on the elements (both the trigger text and the tooltip, and that means javascript). But it may only be there to track the usage of the tooltip or perhaps even some other purpose, but it could be a helper for browsers that cannot reveal the tooltip using css alone. And, since it's part of a large obfuscated script, I doubt we can easily be certain what it's doing. But it should be fairly simple to add a javascript helper for this.

Hmm, looked at this some more, and it appears to have nothing to do with the tooltip.

[molendijk]

One last try. I wonder what happens if you put these lines on your page, after all your other CSS:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/codemirror.css">