Tooltips Cut Off on Desktop Browsers

[ellenjones6]

I am trying to use tooltips to explain some botanical terms on my web pages. I consulted w3schools’ tooltip tutorial page and added the recommended css and html, modified a bit for my purposes. The results are on this page:

http://wildadirondacks.org/adirondac...elliptica.html

The tooltips explain the following terms: alternate, stamens, style, pistil, and sepals. They appear in the bulleted list to the right of the photo under the discussion of flowers.

When viewed at certain screen resolutions, the tooltips work fine and do what I want them to do (appear above the term, in white text on a black background, with a little down arrow pointing to the term, etc). The problem comes when I adjust the screen size so that the term being explained falls near the left margin of the bullet. Part of the text in the tooltip is cut off, apparently obscured by the div holding the photo. The tooltips in the caption under the picture of the Shinleaf appears to work fine.

I have this problem in Chrome, Opera, Firefox, Internet Explorer, Safari, and Microsoft Edge.

This problem also appears on my iPad in Firefox and Opera Mini. In both places, when I touch the trigger term, the tooltip appears, but when the term is close to the left margin, part of it is cut off.

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

Here is my html:

      <p>The fragrant, nodding <strong>flowers</strong> bloom on unbranched stalks which are up to 10 inches high. </p>
      <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: center;
    padding: 5px 0;
    border-radius: 4px;
	font-size: 14px; 

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    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?

[Deadweight]

Try changing z-index:1; to z-index: 100; (cant test a mobile atm)

[ellenjones6]

Well, that was easy! Thank you so much! I had no clue that the problem had to do with stack order. This fixes the problem of the tool tip cutting off on desktop browsers and on the two iPad browsers (Opera Mini and Firefox) where the tooltips work at all.

However, the tooltips do not appear at all on my iPad in Safari or Chrome. Can anyone help on that one?

Also, since this issue is about CSS properties, perhaps this post should be moved to that forum. Do you know how to do that?

Thanks again! ellen

[Deadweight]

I would actually take a guess this is a JavaScript issue now. The event is most likely not triggering. I can be completely wrong.

[jscheuer1]

Deadweight, if you're interested in investigating this, you can alway try using an emulator. Most browsers now have them in their console.

[Deadweight]

Tried and it works using the browser one. I am assuming that

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Is the problem and might need to be changed to something else. EG a hover on a phone with the div element. He might need to change it to a none directional link. I can be wrong.