Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 25

Thread: Tooltips not displaying on iPad in Chrome and Safari

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,497
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Ah well, works in Chrome's iPad emulator. Requires a simulated tap to display.
    - 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 (11-28-2017)

  3. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,815
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Try this code
    Code:
    /* Tooltip container */
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }
    
    /* Tooltip text */
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 4px;
    font-size: 14px; 
    
    /* Position the tooltip text */
    position: absolute;
    z-index: 100;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
        
    }
    
    /* Tooltip arrow */
    .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
    }
    
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    }
    
    .tooltip:active .tooltiptext {
    -webkit-transition: opacity 1s ease-out;
    }

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

    ellenjones6 (11-28-2017)

  5. #13
    Join Date
    Jul 2012
    Posts
    66
    Thanks
    86
    Thanked 0 Times in 0 Posts

  6. #14
    Join Date
    Jul 2012
    Posts
    66
    Thanks
    86
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the suggestion, Arie. I cut and pasted your suggested code. It did not seem to make any difference. The tooltips still work on all six desktop browsers I have on my machine (Chrome, Internet Explorer, Opera, Firefox, Edge, and Safari). They also work, as before, on Firefox and Opera Mini on my iPad. They also work on the Chrome emulator for an iPhone.

    But they do not work on my actual iPad or iPhone for Chrome or Safari.

    By the way, in adapting the W3School's code for my purposes, I added little images. (Glossaries of botanical terms make no sense to me without pictures.) I don't think that's the problem, because when I began this process, I had text only tooltips, and the issue we have been grappling with were exactly the same.

  7. #15
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,815
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Ellen I see a CSS-error in the source of your page. You have somewhere
    Code:
    tooltip .img
      float:left;
      margin:0px 8px 8px 0;
      width: 200px;
    }
    That should be
    Code:
    tooltip .img {
      float:left;
      margin:0px 8px 8px 0;
      width: 200px;
    }
    Maybe that causes the problem.

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

    ellenjones6 (11-28-2017)

  9. #16
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,815
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Sorry, I made a mistake. It should be
    Code:
    .tooltip .img {
      float:left;
      margin:0px 8px 8px 0;
      width: 200px;
    }
    although I'm not sure, because .tooltip .img {...} would imply that you have a class called img (class="img"). Do you have such a className? If so, is the problem gone now?

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

    ellenjones6 (11-29-2017)

  11. #17
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,497
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    At the risk of confusing things further, Arie's (molendijk's) right about that style, and it should actually be:

    Code:
    .tooltip img . . . (continued as before)
    as there is no img class. But I don't think that's the problem. If it were, it would probably not work on any browsers. But it might be, so worth a shot. Though "fixing" it, since it should have heretofore been ignored by all browsers, might actually create new issues.

    If that's not the issue, logic dictates that either there are conflicting styles that only come into effect with the iPad, or that something you changed is at issue. To determine that, make up a page that is otherwise identical, but that reverts to the exact code as used on the w3 schools example. If that still doesn't work, it most likely is conflicting styles. If it does work, then it's something you changed/added.

    If it's conflicting styles, you must remove all other styles aside form the ones governing this feature, and then add them back one at a time to see which one(s) conflict.

    If it's something you changed/added, then it's a little simpler, just start adding/changing one thing at a time until it breaks.

    It could be both though, let's hope not.

    One more thing, on iPad it may not always be easy to clear the cache and refresh the page between attempts. But it's essential you do so. Otherwise, you won't know what you're looking at.
    - John
    ________________________

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

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

    ellenjones6 (11-29-2017)

  13. #18
    Join Date
    Jul 2012
    Posts
    66
    Thanks
    86
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the suggested revision of the code, which is now:

    Code:
    .tooltip img {
      float:left;
      margin:0px 8px 8px 0;
      width: 200px;
    	border-radius: 4px;
    }
    I hope that's what you meant.

    Anyway, I tested it out by adding a little border radius to the image, similar to the border radius on the tooltip itself. Sure enough, all browsers on the desktop and the browsers which work on the iPad are now showing a little border radius on the image as well as on the black background of the tooltip itself. But, of course, the tooltips are still not working at all on Chrome and Safari on the iPad.

    Thank you for the suggestion about clearing the cache on the iPad. I went in and did that for all four browsers on my iPad. Now, I have to go back and test each suggested revision, clearing the cache after every test. I think I'll save that mission for tomorrow morning, when my head is clearer.

    What a struggle!

    Thanks again to both of you, Ellen.

  14. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,497
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yes, that's what I meant, but I'm not real confident that will solve the problem. But, as I said, it's worth a shot. You see, the way that was before, it was doing nothing in any browser, so is unlikely to be the problem. But there's always a chance. If it's not the solution you will likely need to do what I suggested:

    Quote Originally Posted by jscheuer1 View Post
    If that's not the issue, logic dictates that either there are conflicting styles that only come into effect with the iPad, or that something you changed is at issue. To determine that, make up a page that is otherwise identical, but that reverts to the exact code as used on the w3 schools example. If that still doesn't work, it most likely is conflicting styles. If it does work, then it's something you changed/added.

    If it's conflicting styles, you must remove all other styles aside form the ones governing this feature, and then add them back one at a time to see which one(s) conflict.

    If it's something you changed/added, then it's a little simpler, just start adding/changing one thing at a time until it breaks.

    It could be both though, let's hope not.
    If that's not clear, I can elaborate.
    - John
    ________________________

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

  15. #20
    Join Date
    Jul 2012
    Posts
    66
    Thanks
    86
    Thanked 0 Times in 0 Posts

    Default

    Arie: I tried the revised code you sent me on 28 November. after clearing the cache on my iPad for Chrome and Safari (as suggested by John). The change, sadly, did not solve the problem. The tooltips still worked correctly on mouse-over for all six browsers on the desktop and for two browsers (Opera Mini and Firefox) on my iPad (on touch). However, as before, the tooltips did not show up at all on my iPad for Chrome and Safari, after clearing the cache.

    I tried several other fruitless code changes (after clearing cache each time), and nothing worked for Chrome and Safari on the iPad.

    John: Your suggestion of going through my style sheet and removing other styles one at a time is a good one, but at the moment I find it simply too daunting, especially as I have a lot of content pages to add to the web site. So, I am going to admit defeat on this one. I may decide to just give up on the whole tooltip idea. The other course of action is to continue tooltipping my pages on the assumption that adding this feature will help those users who do not use the problem browsers on their iPads.

    Thank you both for helping! ellen

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
  •