Page 3 of 3 FirstFirst 123
Results 21 to 25 of 25

Thread: Tooltips not displaying on iPad in Chrome and Safari

  1. #21
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,407
    Thanks
    77
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (12-05-2017)

  3. #22
    Join Date
    Jul 2012
    Posts
    66
    Thanks
    86
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #23
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,407
    Thanks
    77
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (12-06-2017)

  6. #24
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,407
    Thanks
    77
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 12-05-2017 at 07:50 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (12-05-2017)

  8. #25
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,741
    Thanks
    46
    Thanked 223 Times in 216 Posts
    Blog Entries
    53

    Default

    One last try. I wonder what happens if you put these lines on your page, after all your other CSS:
    Code:
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/codemirror.css">

  9. The Following User Says Thank You to molendijk For This Useful Post:

    ellenjones6 (12-07-2017)

Similar Threads

  1. code not working in safari iphone and ipad
    By vinpkl in forum JavaScript
    Replies: 4
    Last Post: 05-14-2015, 12:12 PM
  2. Replies: 1
    Last Post: 11-23-2010, 09:04 PM
  3. Displaying tooltips across frames
    By cjedmonton in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-22-2008, 01:59 PM
  4. Replies: 0
    Last Post: 10-06-2008, 06:29 AM
  5. Displaying tooltips across frames
    By cjedmonton in forum JavaScript
    Replies: 0
    Last Post: 08-31-2004, 05:17 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •