Tooltips not displaying on iPad in Chrome and Safari

[jscheuer1]

Ah well, works in Chrome's iPad emulator. Requires a simulated tap to display.

[molendijk]

Try this 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;
}

[ellenjones6]

Thank you. Here is the link: http://wildadirondacks.org/adirondac...elliptica.htmlhttp://wildadirondacks.org/adirondac...elliptica.html

[ellenjones6]

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.

[molendijk]

Ellen I see a CSS-error in the source of your page. You have somewhere

tooltip .img
  float:left;
  margin:0px 8px 8px 0;
  width: 200px;
}

That should be

tooltip .img {
  float:left;
  margin:0px 8px 8px 0;
  width: 200px;
}

Maybe that causes the problem.

[molendijk]

Sorry, I made a mistake. It should be

.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?

[jscheuer1]

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

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

[ellenjones6]

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

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

[jscheuer1]

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:

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.

[ellenjones6]

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