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/adirondac...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 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/adirondac...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....tip_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.