Results 1 to 6 of 6

Thread: Tooltips Cut Off on Desktop Browsers

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

    Default Tooltips Cut Off on Desktop Browsers

    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:

    Code:
          <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:

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

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    493
    Thanks
    9
    Thanked 53 Times in 51 Posts

    Default

    Try changing z-index:1; to z-index: 100; (cant test a mobile atm)
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. The Following User Says Thank You to Deadweight For This Useful Post:

    ellenjones6 (11-23-2017)

  4. #3
    Join Date
    Jul 2012
    Posts
    66
    Thanks
    86
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    493
    Thanks
    9
    Thanked 53 Times in 51 Posts

    Default

    I would actually take a guess this is a JavaScript issue now. The event is most likely not triggering. I can be completely wrong.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  6. The Following User Says Thank You to Deadweight For This Useful Post:

    ellenjones6 (11-24-2017)

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

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

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

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

    ellenjones6 (11-26-2017)

  9. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    493
    Thanks
    9
    Thanked 53 Times in 51 Posts

    Default

    Tried and it works using the browser one. I am assuming that
    Code:
    /* 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.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. xtended desktop
    By jonnyb246 in forum Computer hardware and software
    Replies: 1
    Last Post: 06-02-2008, 10:04 PM
  2. Desktop Screenshots II
    By techno_race in forum Picture Gallery
    Replies: 47
    Last Post: 10-04-2007, 01:54 AM
  3. IE6 and IE7 on one desktop?
    By james438 in forum Other
    Replies: 7
    Last Post: 08-10-2007, 08:39 PM
  4. Desktop Shortcut
    By lorica in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-22-2005, 06:47 AM
  5. Active desktop
    By SeaDemon in forum Other
    Replies: 2
    Last Post: 07-25-2005, 11:46 AM

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
  •