Tooltips not displaying on iPad in Chrome and Safari

[ellenjones6]

I am trying to use tooltips to explain some botanical terms on my web pages. The page in question is here:

http://wildadirondacks.org/adirondack-wildflowers-shinleaf-pyrola-elliptica.html

The tooltips appear in the bulleted list to the right of the photo under the discussion of flowers.

A few days ago, I was having a problem with the tooltips cutting off, but (thanks to Deadweight, who pointed out that I had to change my z-index to 100), that problem has been solved. The tooltips display correctly (no cutoffs) on my desktop in Chrome, Opera, Firefox, Internet Explorer, Safari, and Microsoft Edge. On my iPad, the tooltips now display correctly on Firefox and Opera Mini.

However, the tooltips do not work at all on my iPad in either Chrome or Safari. When I touch the trigger word, nothing happens; no tooltip appears.

Here is my html:


<div class="figureLeft">
<img src="images/Adirondack-Wildflowers-Shinleaf-Pyrola-elliptica-Craig-Wood-7-July-2011-81.jpg" alt="Wildflowers of the Adirondack Park: Shinleaf near Craig Wood Golf Course in Lake Placid (7 July 2011)." title="Wildflowers of the Adirondack Park: Shinleaf near Craig Wood Golf Course in Lake Placid (7 July 2011)." class="imageRight">
<div class="figcaptionleft">
<a href="adirondack-wildflowers.html">Wildflowers of the Adirondacks</a>: Shinleaf flowers grow around the stem and have a cluster of orange-tipped <div class="tooltip">stamens<span class="tooltiptext">The male part of the flower, made up of the filament and anther.</span></div> and a long curved <div class="tooltip">style<span class="tooltiptext">The narrow part of the pistil.</span>
</div>. Shinleaf near Craig Wood Golf Course in Lake Placid (7 July 2011).</div></div>
<ul class="rightSectionLeftImageList">
<li class="rightSectionLeftImageList">Each stalk has three to 21 greenish-white, waxy flowers. The long flower stalk is hairless.
The flowers are <div class="tooltip">alternate<span class="tooltiptext">Appearing singly along the stems, not in pairs.</span></div> and appear along the upper part of the stem.</li>
<li class="rightSectionLeftImageList">In contrast to <a href="adirondack-wildflowers-one-sided-wintergreen-orthilia-secunda.html">One-sided Wintergreen</a> (<em>Orthilia secunda</em>), another member of the <em>Ericaceae</em> family, Shinleaf flowers are not one-sided; they appear around all sides of the flower stem. </li>
<li class="rightSectionLeftImageList">Each flower is about &frac13; inch wide.*Shinleaf flowers have five oval petals and a cluster of orange-tipped <div class="tooltip">stamens<span class="tooltiptext">The male part of the flower, made up of the filament and anther.</span></div> under the upper petals. The flowers also have a long curved, pale green
<div class="tooltip">style<span class="tooltiptext">The narrow part of the pistil.</span>
</div>, which is the long, tube-like part of the <div class="tooltip">pistil<span class="tooltiptext">The female part of the flower made up of the stigma, style, and ovary.</span>
</div>. The petals may have greenish veins. The
<div class="tooltip">sepals<span class="tooltiptext">The parts that look like little green leaves and cover the outside of a flower bud to protect the flower before it opens.</span>
</div> are triangular, about as long as wide and about ¼ as long as the petals. </li></ul>


Here is my css:


/* 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;
}

/* 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;
}

I have searched the forums for an answer, but was unable to find one.

What am I doing wrong? I am posting this in the CSS forum, since I think it may be a problem with my CSS.

[molendijk]

This (https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly) may be helpful.

[ellenjones6]

Thank you, but I want to avoid Javascript or jQuery.

I want to stick with the CSS-only tooltip I adapted from the W3 Schools tooltip tutorial. Their tooltips work perfectly in Chrome and Safari on my iPad, so it must be something I am doing wrong, either with my CSS or my HTML. Alternatively, there may be something else (on the page or in my external CSS or the externalized scripts I am using) that is interfering with the tooltips in Chrome and Safari on my iPad.

These CSS-only tooltips work perfectly in all my browsers on my desktop and in Firefox and Opera on my iPad.

Now, I am just trying to get them to work in Chrome and Safari on my iPad.

How can I achieve that goal?

[molendijk]

To solve the problem, it may be helpful to first see what happens when you don't use animation (no fade in) for the tooltip.

[ellenjones6]

If I understand you correctly, you are suggesting that I remove the code for fade-in, which I believe is this:


/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;

So, I took out that code and redeployed the page, which is here: http://wildadirondacks.org/adirondack-wildflowers-shinleaf-pyrola-elliptica.html

Sad to say, the tooltips still don't work on my iPad in Chrome or Safari. They work in everything else I have tried (desktop, all browsers; iPad Firefox and Opera).

When I try the tooltips from the W3Schools site (see: https://www.w3schools.com/css/css_tooltip.asp ), they work just fine on all browsers on my iPad. So, it's not the W3School's code that's the problem. Either I have messed up the code somehow or there is something on my page, in my external CSS, or in my other Javascripts, that is creating a problem with Chrome and Safari on the iPad.

I am not in a panic about it, because the tooltips work just fine on everything else, but I would like to see if there is a reasonable solution before I give up. I like the way the tooltips look and work on the desktop and other browsers, and I especially like the fact that they don't involve Javascript.

But I would still like to see if there is a way to make them work on Chrome and Safari on my iPad.

[molendijk]

It's a weird thing. Your code looks correct and there are no errors on your page.
Does the tooltip even show when you remove visibility: hidden?

[jscheuer1]

Just to be a little clearer here, if something happens on hover on a "regular" computer, one would need to tap it to get the same response on a touch only (no mouse or equivalent) device. And I'm only certain of that where javascript is involved. Not sure with css. In any case, touch devices aren't very friendly to the css pseudo class :hover, perhaps if you added :active it might be more responsive, but, again, only on a tap. And probably only if it's an a tag. And I seem to remember there being restrictions on :active. Something to do with the possibility of it's being used in tracking a user's movements. That may or may not apply to showing a tooltip.

[ellenjones6]

Well, I tried this. If I understand you correctly, you are suggesting that I add this code:


/* Show the tooltip text when you tap the tooltip container on an iPad */
.tooltip:active .tooltiptext {
visibility: visible;
opacity: 1;
}

It appeared to have made no difference. The tooltips still worked on all the desktop browsers and on Firefox and Opera on my iPad. They still failed to appear when I tapped on them on the iPad in Chrome or Safari.

I don't think it's anything in the tooltip code itself. Why do I say that? Because the tooltips on the W3Schools page, from which I took my code, work perfectly on my iPad in Chrome and Safari. Here is one of the pages with their tooltips: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition

Of course, in the process of adjusting the W3Schools code for my needs, I might have messed something up. But I think it's more likely that it's something in my external CSS or Javascript (one for the Google search box and one for the accordions).

What I can't figure out is why my tooltips work perfectly on the Ipad in Firefox and Opera. I tap on them and they show up and then disappear when I move to another part of the page. So what is it about the code that Google and Safari don't like?

I remain perplexed. Do you think I should just abandon the effort to fix the tooltips so that they work on all browsers on the iPad? I hesitate to jettison the approach altogether and search around for a completely different model, because I may well run into the same problem: code that works in the model on all browsers in both desktop and iPad, but only partially works when I try to apply the model to my page.

[ellenjones6]

Thank you for the suggestion about removing visibility: hidden. I tried it. It did not solve the problem.

[jscheuer1]

Well, with visibility: hidden removed. the tooltip should always be visible. At least using the w3 schools method, and apparently yours as well because it works on other browsers. So there is some other thing keeping the tip from being seen on the touch devices. Possibly they are positioned off screen. If you have a link to your page, I'll check it out in the emulator. If not, please provide a link.

[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/adirondack-wildflowers-shinleaf-pyrola-elliptica.htmlhttp://wildadirondacks.org/adirondack-wildflowers-shinleaf-pyrola-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

[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">